Блог

Главная - Вопросы по программированию - как удалить синий фон на «активном» NavDropdown.Элемент при использовании LinkContainer?

как удалить синий фон на «активном» NavDropdown.Элемент при использовании LinkContainer?

#react-bootstrap

Вопрос:

При использовании LinkContainer в react-начальной загрузке «активный» <NavDropdown.Item /> становится blue таким, как он background-color есть . например:

 <NavDropdown>
    <LinkContainer to="/profile">
     <NavDropdown.Item>profile</NavDropdown.Item>
    </LinkContainer>
    <LinkContainer to="/">
     <NavDropdown.Item>
      logout
     </NavDropdown.Item>
    </LinkContainer>
</NavDropdown>

Как мне удалить его и заменить своим собственным цветом ?

Я пытался сделать это :

 a .active.dropdown-item {
  background-color: white
}

Ответ №1:

У меня нет опыта работы с React-Bootstrap, но я предполагаю, что он получает псевдокласс :active .

Поэтому вам нужно сделать что-то вроде:

 a:active {
  background-color: white
}

https://www.w3schools.com/cssref/sel_active.asp

Комментарии:

1. Спасибо. Хотя это не точный ответ, но эта концепция помогла мне решить проблему.

Ответ №2:

Решение(предположим, что мы хотим добавить зеленый цвет в качестве фона):

  1. На данный момент вы нажимаете на ссылку, т. е. показываете активную ссылку:-

    a.выпадающий список-элемент:активный{ цвет фона: зеленый; }

  2. Чтобы цвет оставался на активном навигационном выпадающем списке.Предмет:

    a.активный.выпадающий список-элемент { цвет фона: зеленый; } ИЛИ

    вы могли бы добавить activeStyle реквизит в LinkContainer

    <LinkContainer to=»/профиль» activeStyle={{ Цвет фона: «зеленый», }} />

Метки: