Im using react bootstrap to make a navbar. Here is the code:
import React from 'react';
import { Link } from "react-router-dom";
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown';
import styles from './loginHeader.module.css';
const LoginHeader = () => {
return (
<Navbar bg="white" expand="lg">
<Container >
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
<Nav.Link >Contact</Nav.Link>
<Nav.Link >Request Demo</Nav.Link>
</Nav>
<Nav >
<NavDropdown className={styles.sample} title="Register" >
<NavDropdown.Item >Patient</NavDropdown.Item>
<NavDropdown.Item ><Link to="/registerOwner" >Owner</Link></NavDropdown.Item>
<NavDropdown.Item >Doctor</NavDropdown.Item>
</NavDropdown>
<Nav.Link><Link to="/" >Login </Link></Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
)
}
export default LoginHeader;
I want to override the text color of dropdown using loginHeader.module.css. Its given as below:
.sample{
color: #1173bc;
font-weight: bold;
}
but its not changing the color. I have tried using !important key word. Still its not working. Any idea on overriding react-bootstrap properly using css module files?
There is a button element inside the dropdown, in order to change its color you need to pick it with :
.sample .btn{
color:#000000
}
Related
Hi guys so I'm currently trying to make web app using react-bootstrap and I wanted to change some of the navbar element from react-bootstrap module using CSS. I want to change the color, font size, etc. for the nav.link tag how can I do it ?
Here's my Header.JS code:
import {Navbar, Nav} from 'react-bootstrap'
import {Link} from 'react-router-dom'
import '../CSS/Header.css'
const Header = () => {
return (
<Navbar className="MainHeader" expand="lg" variant="dark">
<>
<Navbar.Brand className="Headerlogo" as={Link} to={"/"}>
<img src="/Images/logowhite.png" alt="hotel_logo"/>
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse className="Headerlist justify-content-end fontReg">
<Nav>
<Nav.Link as={Link} to={"/Facilities"}>Facilities</Nav.Link>
<Nav.Link as={Link} to={"/Room"}>Room</Nav.Link>
<Nav.Link as={Link} to={"/Events"}>Events</Nav.Link>
<Nav.Link as={Link} to={"/Contactus"}>Contact Us</Nav.Link>
<Nav.Link as={Link} to={"/Booknow"}>Book Now</Nav.Link>
</Nav>
</Navbar.Collapse>
</>
</Navbar>
)
}
export default Header
You can do it with css. Add class to your element
<Nav.Link as={Link} to={"/Facilities"} className="custom-link"> ...
Then in your Header.css file
.custom-link {
color: #F5890;
font-size: 20px;
...
}
I'm trying to align and size a react component under a Navbar using react-bootstrap v0.33.1. I want the map to have the full width of the Navbar component and be centrally aligned beneath it. However, no matter how I place the component, it will do one of the following:
If I use the <Grid> and <Col> component to wrap the <Map> component, then the map is too far to the right.
export default function Map() {
return (
<Grid>
<Col md={12}>
<MapContainer />
</Col>
</Grid>
);
}
If I remove <Grid> and then I end up with the` component being the full width of my device screen.
export default function Map() {
return (
<MapContainer />
);
}
Here are the other components:
function MapContainer(props) {
const mapStyles = {
width: '100%',
height:'500px'
};
return (
<div>
<Map
google={props.google}
zoom={10}
// style={{
// width: "300px"
// }}
style={mapStyles}
initialCenter={{
lat: 47.6128856,
lng: -122.3631801
}}
/>
</div>
)
}
function App() {
return (
<div className="App container">
<Navbar fluid collapseOnSelect>
<Navbar.Header>
<Navbar.Brand>
<Link to="/">Skatespots</Link>
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav pullRight>
{ isAuthenticated
? <NavItem onClick={handleLogout}>Logout</NavItem>
: <>
<LinkContainer to="/signup">
<NavItem>Signup</NavItem>
</LinkContainer>
<LinkContainer to="/login">
<NavItem>Login</NavItem>
</LinkContainer>
</>
}
</Nav>
</Navbar.Collapse>
</Navbar>
<AppContext.Provider value={{isAuthenticated, userHasAuthenticated}}>
<Routes />
</AppContext.Provider>
</div>
);
.App {
margin-top: 15px;
}
.App .navbar-brand {
font-weight: bold;
}
I do not know what the issue is and this simple issue is being such a pain. using a negative margin value seems like it'd be the wrong way to fix scenario 1 and using a fixed width with px seems like it wouldn't be dynamic for different screen sizes for scenario 2. Thanks.
I'm learning React Router and following this tutorial
Everything is clear and working as instructed (thank you author) except an issue that highlights the active NavLink.
Take a look at the css file and note the .current class:
nav ul {
list-style: none;
display: flex;
background-color: black;
margin-bottom: 20px;
}
nav ul li {
padding: 20px;
}
nav ul li a {
color: white;
text-decoration: none;
}
.current {
border-bottom: 4px solid white;
}
When I load the app, Home link in the navi is highlighted with a the white bottom border line but it stays highlighted even when I click on the "about" link or the "Contact" link. I followed everything step by step but this one issue I can't figure out.
After reading the react documentaton about the NavLink and many tutorials online, still, don't know how to fix it.
Here is when I click on the about link
Here is when I click on Contact link
This is how the tutorial routes example
<nav>
<ul>
<li><NavLink exact activeClassName="current" to='/'>Home</NavLink></li>
<li><NavLink exact activeClassName="current" to='/about'>About</NavLink></li>
<li><NavLink exact activeClassName="current" to='/contact'>Contact</NavLink></li>
</ul>
</nav>
Notice how the Home link stays with the active white line under it despite the fact that it is not the active link anymore.
Adding activeClassName="current" suppose to highlight the current view with white underline but the home link stays highlighted with the white underline.
So, to all of you out there with years of experience, please help.
Here is My app.js
import React, { Component } from 'react';
import './App.css';
import Main from './components/main';
import Navigation from './components/navigation';
class App extends Component {
render() {
return (
<div>
<h1> React Router </h1>;
<h5> import 'BrowserRouter' from 'react-router-dom' in Appjs</h5>
<hr></hr>
<Navigation />
<Main />
</div>
);
}
}
export default App;
Here is my index.js
import React from 'react';
import ReactDOM from 'react-dom';
//Add browserrouter to use it in your app
import { BrowserRouter } from 'react-router-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
//this router example is from this site
//https://blog.pusher.com/getting-started-with-react-router-v4/
/*
You can only pass a single child element to a Router,
so it is necessary to create a root component
that renders the rest of your application and
then pass that in as the child of the Router.
*/
ReactDOM.render((
<BrowserRouter>
<App />
</BrowserRouter>
), document.getElementById('root'));
Here is my main.js
import React, { Component } from 'react';
import { NavLink, Switch, Route } from 'react-router-dom';
import Home from './home';
import About from './about'
import Contact from './contact'
class Main extends Component {
render() {
return (
<div>
<p> My main component </p>
<Switch>
<Route exact={true} path='/' component={Home}></Route>
<Route path='/about' component={About}></Route>
<Route path='/contact' component={Contact}></Route>
</Switch>
</div>
);
}
}
export default Main;
And finally here is my navigation.js
import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';
class Navigation extends Component {
render() {
return (
<div>
<p> My Navigation component </p>
<nav>
<ul>
<li><NavLink to='/'> Home </NavLink> </li>
<li><NavLink to='/about'> About </NavLink> </li>
<li><NavLink to='/contact'> Contact </NavLink> </li>
</ul>
</nav>
</div>
);
}
}
export default Navigation;
The Navlink also needs an exact on it... Change to this:
import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';
class Navigation extends Component {
render() {
return (
<div>
<p> My Navigation component </p>
<nav>
<ul>
<li><NavLink to='/' activeClassName="current" exact={true}> Home </NavLink> </li>
<li><NavLink to='/about' activeClassName="current"> About </NavLink> </li>
<li><NavLink to='/contact' activeClassName="current"> Contact </NavLink> </li>
</ul>
</nav>
</div>
);
}
}
export default Navigation;
You should add the exact property to your root("") Route, otherwise, it will match every route starting with "", React Router exact
eg:
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/topics" component={Topics} />
Update:
Also changing the order will have same effect without exact property
<Route path="/about" component={About} />
<Route path="/topics" component={Topics} />
<Route path="/" component={Home} />
in side a router switch it will go to the first matching route, if we add a route with path / at the beginning it will always render the component in the path, it is better avoid exact fix with order
for v6, use end instead of exact
<NavLink end activeClassName="activeNavLink" to="/">
Remove activeClassName and activeStyle props from <NavLink />
As of v6.0.0-beta.3, the activeClassName and activeStyle props have been removed from NavLinkProps. Instead, you can pass a function to either style or className that will allow you to customize the inline styling or the class string based on the component's active state.
className
<NavLink
to="/"
className={({ isActive }) => "nav-link" + (isActive ? " activated" : "")}
>
Home
</NavLink>
style
<NavLink
to="/"
style={({ isActive }) => ({ color: isActive ? 'green' : 'blue' })}
>
Home
</NavLink>
source
exact prop has to be provided to the NavLink component.
It works something like this,
Home
Pictures
When the user clicks on Home, url='/me', it loads home component, when the user clicks on Pictures, url='/me/pictures', if exact is not provided in the NavLink, then both url contains '/me', which makes both of them active.
Its the usecase for exact prop of NavLinks.
You can use exact and strict asper your need in Navlinks.
I am using react strap to help style an application I'm creating, however I can't figure out how to change the background color of the nav from white to black. I have tried to color ="dark" in the nav tabs tag but that hasn't work. Any help?
import React, { Component } from 'react';
import { Nav, NavItem, Dropdown, DropdownItem, DropdownToggle, DropdownMenu, NavLink } from 'reactstrap';
export default class nav extends React.Component{
constructor(props) {
super(props);
this.toggle = this.toggle.bind(this);
this.state = {
dropdownOpen: false
};
}
toggle() {
this.setState({
dropdownOpen: !this.state.dropdownOpen
});
}
render() {
return (
<div>
<Nav tabs>
<NavItem>
<NavLink href="/" active>blank.</NavLink>
</NavItem>
<Dropdown nav isOpen={this.state.dropdownOpen} toggle={this.toggle}>
<DropdownToggle nav caret>
Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</Dropdown>
<NavItem>
<NavLink href="#">Link</NavLink>
</NavItem>
<NavItem>
<NavLink href="#">Another Link</NavLink>
</NavItem>
<NavItem>
<NavLink href="#">Disabled Link</NavLink>
</NavItem>
</Nav>
</div>
);
}
}
reactstrap doesn't have clear documentation, so I only see here 2 options:
Just use inline styles in the components
<Nav style={{backgroundColor: '#f1f1f1'}}>Something</Nav>
Or use css-modules through
import styles from './Component.module.css'
<Nav className={styles.Component}>Something</Nav>
where you define your ctyles in css
.Component{
background-color: #f1f1f1
}
Note: css-modules sometimes is not enough to override bootstrap styling, but inline styles should help
Utility classes still work with reactstrap. Just use className='bg-dark' on the parent element, and you'll get your dark background.
An approach using styled-components:
const MastHeadJumboTron = styled.div`
&.jumbotron {
background: #000;
}
`;
const MastHead = () => (
<Jumbotron as={MastHeadJumboTron} fluid>
<Container>
<h1>May the force be with you!</h1>
<input placeholder="Filter People" />
</Container>
</Jumbotron>
);
You can create a class with your custom css and mark them !important. Thus over-riding the default styling.
.custom-btn {
background: #000 !important;
}
According to the documentation, for AvField as Input, there are props like inputClass and labelClass that helps you to manage styling for text-box and label respectively.
<AvField
name="member_name"
label="Team Member Name"
inputClass="bg-gradient-primary"
type="text"
placeholder="Name of Team Member"
onChange={this.handleChange}
/>
And for Input Component, you can use className and cssModule for styling purpose.
Referring to the image links in the comments below, do you know how to achieve the effects which turn navbar collapse into sidebar properly in mobile view? How to achieve it without affecting and shifting the logo and the button?
//[Home Navbar Desktop View]: https://i.stack.imgur.com/THf6k.jpg
//[Home Navbar Mobile View]: https://i.stack.imgur.com/CiJOc.png
//[Home Navbar/Sidebar Extend Mobile View]: https://i.stack.imgur.com/HhJxQ.png
import React, { Component } from 'react';
import { Switch, Route } from 'react-router-dom';
import Home from "./components/home/home";
import About from "./components/about/about";
import Portfolio from "./components/portfolio/portfolio";
import Services from "./components/services/services";
import { Collapse, Navbar, NavbarToggler, NavbarBrand, Nav, NavItem, NavLink, Button } from 'reactstrap';
import './App.css';
import 'tachyons';
class App extends Component {
constructor(props) {
super(props);
this.toggle = this.toggle.bind(this);
this.state = {
isOpen: false
};
}
toggle() {
this.setState({
isOpen: !this.state.isOpen
});
}
render() {
return (
<div className='App'>
<Navbar className='sticky-top' color="light" light expand="md">
<NavbarBrand href="/"><b className='logo'>Amecle</b></NavbarBrand>
<NavbarToggler className="order-first" onClick={this.toggle} />
<Collapse isOpen={this.state.isOpen} navbar>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink href="/about">About</NavLink>
</NavItem>
<NavItem>
<NavLink href="/services">Services</NavLink>
</NavItem>
<NavItem>
<NavLink href="/portfolio">Portfolio</NavLink>
</NavItem>
</Nav>
</Collapse>
<Button className="still_on_view" outline color="primary">Request a quote</Button>{' '}
</Navbar>
This answer work for me.
At <Navbar className='sticky-top' color="light" light expand="md">
change expand="md" to expand="lg" (this indicate when media at max 1024px (ipad size), will collapse).