I'm stuck with this bootstrap Navbar.
this is my Navbar that I use from bootstrap library.
<Navbar bg = "transparent" className = "me-auto" expand = "lg" sticky='top' collapseOnSelect>
<Container>
<Navbar.Brand href="#home">
<img
alt=""
src={navBarLogo}
height = "40"
className="d-inline-block align-top"
/>{' '}
</Navbar.Brand>
<Navbar.Toggle/>
<Navbar.Collapse id="responsive-navbar-nav" style = {{"justifyContent": "right"}}>
{/* TODO: refractor css later */}
<Nav activeKey={navKey} onSelect={(selectedKey) => {setNavKey(selectedKey);}}>
<Nav.Link href = "#nhan-qua-tang" eventKey = "receiveGift" className = "active_nav_link"> Receive Gift</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
this is my CSS style that I want to apply
.inactive_nav_link {
color: #6E7171;
}
.active_nav_link {
color: #4FBA69
}
As I see in the console that my Nav.Link style is overriddened by the default className of bootstrap's Nav.Link.
How can I apply my own className to this Nav.Link?
You can use a more specific rule as described in "Instead of using !important" in this mdn css Specificity guide.
Changing:
.inactive_nav_link {
color: #6E7171;
}
.active_nav_link {
color: #4FBA69;
}
To:
.navbar-light .navbar-nav .nav-link.inactive_nav_link {
color: #6E7171;
}
.navbar-light .navbar-nav .nav-link.active_nav_link {
color: #4FBA69
}
Tested on React Bootstrap Navbars page
Related
I'm trying to test if an element has the proper styles. However this only works when I add inline styling to the element. I'm also using css modules, so I'm not sure if that is the problem.
The test
test("3.1.2.if the nav link opens properly", () => {
render(
<Router>
<Header />
</Router>
);
const nav = screen.getByRole("navigation");
expect(nav.style).toHaveProperty("transform", "rotate(0)")
});
(Relevant) JSX
<div
className={`${styles.options} ${
dropdownOpened ? styles.options__dropdown__open : ""
}`}
onClick={handleDropdown}
role="navigation"
>
<IconContext.Provider
value={{
color: "white",
className: styles.options__dropdown__btn,
}}
>
<IoMdArrowDropdown />
</IconContext.Provider>
</div>
(Relevant) CSS
.options:not(.options__menu__opened, .options__dropdown__open) {
transform: rotate(0);
}
You may try to use window.getComputedStyle, see also #testing-library/dom window.getComputedStyle "Not implemented" error even after setting computedStyleSupportsPseudoElements: true
I'm trying to use emotion.
My .js code is:
import React from 'react';
import { css } from '#emotion/core';
export const Menu = () => (
<>
<nav
css={css`
position: absolute;
color: white;
`}
>
<h1
css={css`
color: white;
`}
>
Title
</h1>
<ul>
<li>Proyectos</li>
<li>Blog</li>
<li>Acerca</li>
<li>Contacto</li>
</ul>
</nav>
</>
);
export default Menu;
When inspecting the element, I get this instead:
You have tried to stringify object returned from css function. It isn't supposed to be used directly (e.g. as value of the className prop), but rather handed to emotion so it can handle it (e.g. as value of css prop).
Use JSX Pragma with jsx function from '#emotion/react'. This allow use css prop.
Docs: https://emotion.sh/docs/css-prop#jsx-pragma
/** #jsx jsx */
import { jsx } from '#emotion/react'
import { css } from '#emotion/core'
const App = () => (
<nav
css={css`
position: absolute;
color: white;
`}
>
<h1
css={css`
color: white;
`}
>
Title
</h1>
<ul>
<li>Proyectos</li>
<li>Blog</li>
<li>Acerca</li>
<li>Contacto</li>
</ul>
</nav>
)
I'm learning to use styled components,but it looks like when i target css classes in hierarchy,it doesn't seem to work.Here i'm using i would like to make apply some styles wheneve use hovers on navigations links.
Here is my navbar code :
import React from "react";
import { Nav, Navbar } from "react-bootstrap";
import Flag from "../common/Image";
import styled from "styled-components";
import NavLink from "../common/NavLink";
const imageURL = "/static/img/abc.png";
const Navigation = ({ className }) => {
return (
<Navbar className={className} collapseOnSelect expand="lg" variant="light">
<Navbar.Brand href="#home">
<Flag imageSource={imageURL} size={[80, 70]} />
</Navbar.Brand>
<NavLink linkName="A" URL={"#"} />
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="mr-auto">
<NavLink linkName="B" URL={"#a"} />
<NavLink linkName="C" URL={"#b"} />
<NavLink linkName="D" URL={"#b"} />
</Nav>
<Nav>
<NavLink linkName="Espace de discussion" URL={"#discussions"} />
<NavLink linkName="Contactez-nous" URL={"#contact"} />
<Nav.Link>
<i clasName="fas fa-envelope" />
</Nav.Link>
<Nav.Link>
<i className="fas fa-bell" />
</Nav.Link>
<Nav.Link>
<i className="fas fa-user-circle" />
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
);
};
export default styled(Navigation)`
background-color: white;
border-bottom: 1px solid #e4e8f0;
`;
And my NavLink component
import React from "react";
import styled from "styled-components";
import { Nav } from "react-bootstrap";
import PropTypes from "prop-types";
const NavLink = ({ linkName, URL, className }) => {
return (
<Nav.Link className={className} href={URL}>
{linkName}
</Nav.Link>
);
};
NavLink.PropTypes = {
linkName: PropTypes.string,
URL: PropTypes.string
};
export default styled(NavLink)`
cursor: pointer;
color: green;
transition: 0.4s linear;
padding: 10px;
&:hover {
color: white;
font-size: 90;
background-color: #2e384d;
border-radius: 10px;
}
.navbar-light .navbar-nav .nav-link &:hover {
color: white;
}
`;
I the bellow gif,the animation is for changind links styled is working for all the links,but the color is only changing to white for the A link.But the form other background,border are changing but not the link color.Here the behaviour:
When i use the following code : .navbar-light .navbar-nav .nav-link &:hover {
color: white;
} in a normal css file without using styled component i get the good the exptected behavior.For solving i tried to use sass way of doing in the definition of my styled component like this :
.navbar-light {
.navbar-nav {
.nav-link {
&:hover {
color: white;
}
}
}
}
But nothing changes.How can i do for making all links text become white with styled-compont definition?
Alright, because of how <Nav> is wrapping your <NavLink>, the nav-link className has a higher specificity than your styled component className (the NavLink component is applying the styled component className before "nav-link" and, as a result, doesn't override the Bootstrap CSS). For example, the className looks like: "sc-lhVmIH gcJAof nav-link", where the styled component className: "sc-lhVmIH gcJAof" is being overridden by the last applied className "nav-link". There are several solutions to fix this, as shown below.
Solutions
Simply add color: white !important; in the styled NavLink:
export default styled(NavLink)`
cursor: pointer;
color: green;
transition: 0.4s linear;
padding: 10px;
border-radius: 10px;
&:hover {
color: white !important;
font-size: 90;
background-color: #2e384d;
border-radius: 10px;
}
`;
In Navigation, where <NavBar className={className}>...</NavBar> accepts a styled component className, add the following css to override the Bootstrap CSS stylesheet:
export default styled(Navigation)`
background-color: white;
border-bottom: 1px solid #e4e8f0;
&.navbar-light {
& .navbar-nav {
& .nav-link:hover {
color: white;
}
}
}
`;
Import the Bootstrap less into a less file and override the nav-link:hover className.
CSS Specificity
Here's how the CSS specificity is being applied to the DOM:
Demos
Click here for a working demo.
Working codesandbox (contains solution #1 and #2 -- you'll only need to use one of them, not both):
I am using React and react-router-doms Link component to navigate between pages.
But I am struggling with removing the text-decoration in the component.
React:
<Link className="nav-link" to="/page">LINK</Link>
CSS:
.nav-link {
text-decoration: none;
}
This CSS does not seem to work, but when I replace the Link to a a component it works fine.
<a className="nav-link" href="/page">LINK</a>
Anyone has an idea how to remove the text-decoration from a Link component?
If react-router is less than v4
Try inline style
<Link to="first" style={{ textDecoration: 'none' }}>
Link
</Link>
If you want to use styled-components, you could do something like this:
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import styled from 'styled-components';
const StyledLink = styled(Link)`
text-decoration: none;
&:focus, &:hover, &:visited, &:link, &:active {
text-decoration: none;
}
`;
export default (props) => <StyledLink {...props} />;
OR
You can do it with NavLink in react-router v4
<NavLink
className="tags"
activeStyle={{ color: 'red' }}
to={'/page'}
>
LINK
</NavLink>
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.