Реагируйте на начальную загрузку стиля nav-bar

Question

Я пытаюсь выяснить, как я могу применить стиль к начальной загрузке NavBar. Добавлен jsfiddle здесь. https://jsfiddle.net/pdqzju1e/1/ Возникли проблемы с запуском 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. Есть ли обходной путь для этого?

Answer 1

Проблема для меня заключалась в том, что фоновое изображение было установлено на линейный градиент в одной из таблиц стилей начальной загрузки. 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;
}

Я уверен, что есть гораздо лучший способ сделать это, однако...

Answer 2

Эй, Акшай, ты можешь нацелиться на navbar-header класс для переопределения его атрибутов CSS. Вот демоверсия jsBin.

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

Если бы это помогло вам, я бы порекомендовал поиграться с devtools в Chrome: осмотреть элементы и изменить их стили, чтобы увидеть, на какие классы CSS вы хотите нацелиться.

Answer 3

      <Navbar
        fixedTop
        style={{backgroundSize: "0", backgroundColor: "#A92117"}}
      >

Вышеупомянутый трюк я использовал в своем проекте. Он меняет цвет на красный.

Answer 4

Вы можете изменить цвет MenuItem или NavItem здесь

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

Основной трюк будет в dev-tool и проверке свойств css, и вы можете делать все что угодно.