Измените класс элемента ‹a› в NavItem react-bootstrap

Я пытаюсь работать с react-bootstrap и изменить класс внутреннего элемента NavItem <a>. Я пытался использовать className, но это не повлияло на это.

Я хочу изменить цвет действия hover. Как мне это сделать?

<Navbar.Collapse>
      <Nav pullRight>
        <NavItem eventKey={1} href="#">1</NavItem>
        <NavItem eventKey={2} href="#">2</NavItem>
        <NavItem eventKey={3} href="#" className="my-class">3</NavItem>
      </Nav>
</Navbar.Collapse>

CSS:

.xnavbar-tab a {
  color: #F89800;
}

reactjs twitter-bootstrap react-bootstrap
person itaied    schedule 04.12.2015    source источник
comment
Пожалуйста, добавьте немного больше кода и поведения. Как вы добавляете/удаляете классы при наведении?   -  person Bhargav Ponnapalli    schedule 04.12.2015
comment
Я добавляю действие :hover в файл css, но даже простое изменение цвета ничего не делает   -  person itaied    schedule 04.12.2015

Ответы (3)


arrow_upward
1
arrow_downward

чтобы изменить элемент привязки, созданный с помощью bootstrap-react (например, на вкладках bootstrap-react), вам просто нужно назначить класс родителю и сообщить ему, что его дочерние элементы привязки должны применять их так

.your-class > a
person Jean    schedule 09.07.2016

arrow_upward
0
arrow_downward

Я не думаю, что это возможно, глядя на источник.

https://github.com/react-bootstrap/react-bootstrap/blob/master/src/NavItem.js

Посмотрите на объект linkProps. Он не содержит className. Почему это важно? Потому что якорь принимает объект linkProps в качестве своих свойств. Таким образом, каждая пара ключ-значение в linkProps в конечном итоге становится опорой для якоря. Если className отсутствует в linkProps, как здесь, это означает, что вы не можете передать его снаружи NavItem.

 <SafeAnchor {...linkProps} aria-controls={ariaControls}>
      { children }
    </SafeAnchor>

Дополнительная информация: https://github.com/react-bootstrap/react-bootstrap/blob/master/src/SafeAnchor.js

Решение:

Управляйте CSS якоря в NavItem на основе класса NavItem.

 .nav-item.my-nav-item-class a{
    color : requiredcolor;
  }
person Bhargav Ponnapalli    schedule 04.12.2015
comment
Я сталкивался с этой проблемой довольно много раз, это немного ограничивает, не так ли? Скажем, я хочу изменить несколько шрифтов и классов... - person itaied; 04.12.2015
comment
На самом деле нет, я не вижу смысла добавлять класс к элементу привязки, потому что у вас есть возможность добавить класс к родительскому элементу и, безусловно, вы можете изменить стили на его основе. - person Bhargav Ponnapalli; 04.12.2015
comment
В текущем контексте у вас есть компонент NavItem, и я думаю, что компонент реализовал приличный уровень абстракции и в то же время предоставил реквизиты, необходимые для изменения его поведения. - person Bhargav Ponnapalli; 04.12.2015
comment
Пожалуйста, смотрите мой отредактированный вопрос. Это все еще не работает - person itaied; 04.12.2015

arrow_upward
0
arrow_downward

Если вы используете JSX, вы можете сделать это так:

const css = `
        .hover-list a:hover {
        color: #F89800;
    }
`

<div className="hover-list">
    <Navbar.Collapse>
          <Nav pullRight>
            <NavItem eventKey={1} href="#">1</NavItem>
            <NavItem eventKey={2} href="#">2</NavItem>
            <NavItem eventKey={3} href="#" className="my-class">3</NavItem>
          </Nav>
    </Navbar.Collapse>
</div>
person Ogglas    schedule 17.05.2017