No rounded corners on React-Bootstrap-NavItem

Question

I want to have the same look as the pills style but without the rounded corners

this is what i have so far

<style type="text/css">{`
.nav-pills > li + li {
    border-radius: 0 !important;
}
`}</style>
<Nav
     bsStyle="pills"
     justified
     activeKey={this.props.currentStep}
     onSelect={this.updateCurrentStep.bind(this)}
>
    <NavItem eventKey={1} title="Template">Template</NavItem>
    <NavItem eventKey={2} title="Edit">Edit</NavItem>
    <NavItem eventKey={3} title="Preview">Preview</NavItem>
</Nav>

How do I set the border-radius of my NavItem to 0? It does appear in the rules of the li item but it does not change anything.

Answer 1

There are many different (and arguably better) ways to handle styling in React, but to use a style block like that you need to add dangerouslySetInnerHTML={{__html:

<style dangerouslySetInnerHTML={{__html: `
    .nav-pills > li + li { border-radius: 0 !important; }
`}} />

Answer 2

Inside your styling file, you can give:

.nav-pills>li>a {
    border-radius: 0 !important;
}

which should reset the styles of border radius to 0.

 const Nav = ReactBootstrap.Nav; const NavItem = ReactBootstrap.NavItem; class App extends React.Component { render() { return ( <Nav bsStyle="pills" justified activeKey={this.props.currentStep} onSelect={this.updateCurrentStep} > <NavItem eventKey={1} title="Template">Template</NavItem> <NavItem eventKey={2} title="Edit">Edit</NavItem> <NavItem eventKey={3} title="Preview">Preview</NavItem> </Nav> ); } } ReactDOM.render(<App />, document.getElementById('app')); 

 .nav-pills>li>a { border-radius: 0 !important; } 

 <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.32.1/react-bootstrap.js"></script> <div id="app"></div>