Нет закругленных углов на React-Bootstrap-NavItem - PullRequest
Новая
       25

Нет закругленных углов на React-Bootstrap-NavItem

0 голосов
/ 26 июня 2018

Я хочу выглядеть так же, как стиль 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>

Как мне установить border-radius моего NavItem на 0? Он появляется в правилах элемента li, но ничего не меняет.

Ответы [ 2 ]

0 голосов
/ 02 июля 2018

Внутри вашего файла стилей вы можете указать: 

.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>
0 голосов
/ 26 июня 2018

Существует множество различных (и, возможно, более совершенных) способов обработки стилей в React, но для использования подобного блока стиля необходимо добавить dangerouslySetInnerHTML={{__html:

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