React-Bootstrap-NavItem上沒有圓角

Question

我想擁有與pills樣式相同的外觀，但沒有圓角

這就是我到目前為止

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

如何將NavItem的border-radius設置為0？ 它確實出現在li項的規則中，但它沒有任何改變。

Answer 1

在React中有很多不同的（可能是更好的）樣式處理方式，但是要使用類似的樣式塊，您需要dangerouslySetInnerHTML={{__html:地添加dangerouslySetInnerHTML={{__html:

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

Answer 2

在樣式文件中，您可以提供：

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

應該將邊框半徑的樣式重置為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>