web-dev-qa-db-ja.com

React bootstrap nav-barスタイリング

私は、reactブートストラップNavBarにスタイリングを適用する方法を理解しようとしています。ここにjsfiddleを追加しました。 https://jsfiddle.net/pdqzju1e/1/ react-bootstrapを使用してjsfiddleを実行する際に問題が発生しました。ローカルに設定された環境で動作します。

const navbar = {backgroundColor: '#F16E10'};
export default class NavigationBar extends React.Component {
  render() {
    return (
      <div>
        <Navbar style={navbar}>
          <Navbar.Header>
            <Navbar.Brand>
              <a href="/">Test App</a>
            </Navbar.Brand>
            <Navbar.Toggle />
          </Navbar.Header>
          <Navbar.Collapse>
            <Nav style={navbar}>
              <NavItem eventKey={1} href="#">Link1</NavItem>
              <NavItem eventKey={2} href="#">Link2</NavItem>
            </Nav>
            <Nav pullRight>
              <NavItem eventKey={1} href="#">Link3</NavItem>
            </Nav>
          </Navbar.Collapse>
        </Navbar>
      </div>
    );
  }
}

上記はNavコンポーネントでのみ機能し、NavBarでは機能しないようです。これに対する回避策はありますか？

reactjsnavbarreact-bootstrap
3
Akshay

私にとっての問題は、ブートストラップスタイルシートの1つでbackground-imageが線形グラデーションに設定されていたことでした。 background-imageがbackground-colorよりも優先されていました。以下を使用してそれをオーバーライドすることは私のために働いた：

/* override bootstrap navbar colors */
.navbar,
.navbar-default {
    background-image: linear-gradient(to bottom,#2c4053 0,#2c4053 100%) !important; /* override background image gradient w/ flat color */
}

これもうまくいくはずだったと思いますが、私にはうまくいきませんでした。

.navbar,
.navbar-default {
    background-image: none !important;
}

しかし、これを達成するためのはるかに良い方法があると確信しています...

2
Matt Pengelly

ここでMenuItemまたはNavItemの色を変更できます

 .navbar-default .navbar-nav > li > a {
      color: white;
    }

基本的なトリックは、dev-toolでcssプロパティをチェックすることで、何でもできます。

0
Arslan shakoor

Akshayさん、navbar-headerクラスをターゲットにして、そのcss属性をオーバーライドできます。 これがjsBinデモです 。

.navbar-header {
  background-color: #F16E10;
}

それでうまくいった場合は、Chromeのdevtoolsを試してみることをお勧めします。要素を調べてスタイルを変更し、ターゲットにするcssクラスを確認します。

0
Kunal