I want to style the icon-bar
of a react-bootstrap's Navbar
component to have a background-color: white;
. However, my webpack scss loader does not allow me to style CSS classes with dashes, I can only use camel case. This is my webpack config:
{ test: /\.scss$/, loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap' },
I prefer not to change this config. Instead I would like to change my JSX so I can attach a custom class to the icon-bar
element. How do I do this?
Home.scss
.navbar {
.icon-bar {}
}
Home.js
<Navbar fixedTop fluid className={styles.navbar}>
<Navbar.Header>
...
</Navbar.Header>
<Navbar.Collapse eventKey={0}>
<Nav navbar className="navbar-right">
<LinkContainer to="/how-it-works">
<NavItem eventKey={2} className={styles.navItem}>How It Works</NavItem>
</LinkContainer>
</Nav>
</Navbar.Collapse>
</Navbar>
a simple solution is put the navbar in wrapper element, like this :
<div className={styles.navbar}>
<Navbar fixedTop fluid>
<Navbar.Header>
...
</Navbar.Header>
<Navbar.Collapse eventKey={0}>
<Nav navbar className="navbar-right">
<LinkContainer to="/how-it-works">
<NavItem eventKey={2} className={styles.navItem}>How It Works</NavItem>
</LinkContainer>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.