Multi tool use

No rounded corners on React-Bootstrap-NavItem

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

pills

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.

border-radius

NavItem

li

2 Answers
2

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:

dangerouslySetInnerHTML={{__html:

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


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">

https://unpkg.com/react@16/umd/react.development.js
https://unpkg.com/react-dom@16/umd/react-dom.development.js
https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.32.1/react-bootstrap.js



By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.