I am trying to customize the icon-bar in a react-bootstrap's Navbar component by setting its background color to white. However, my webpack scss loader is preventing me from styling CSS classes with dashes, as it only allows camel case. This restriction is specified in my webpack configuration:
{ test: /\.scss$/, loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap' },
I would rather not alter this configuration. Instead, I am looking for a way to add a custom class to the icon-bar element in my JSX code. How can I accomplish 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>