Имя экрана NavBar и нижняя граница изменяются, когда экран активен в реакции js ⇐ CSS

[Anonymous]

Мне нравится


NavBar.js

Код: Выделить всё

[img]https://cdn-icons-png.flaticon.com/128/1176/1176875.png[/img]
FEED

App.css

Код: Выделить всё

.icon-tab {
justify-content: center;
align-items: center;
display: flex;
width: 90px;
margin-left: 30px;
text-align: center;
}

.icon-tab:active{
border-bottom: 2px solid #0275b1;
}
.icon-name {
font-weight: bold;
text-decoration: none;
color: #000;
}

.icon-name:active {
font-weight: bold;
color: #0275B1;
}

когда основной активный экран является домашним, тогда на главном экране никогда не будет отображаться значок панели и цвет заголовка главного экрана, а также появится нижняя граница, когда экран открыт (активен)
Я пытаюсь это сделать, но это не работает, мой результат выглядит следующим образом: когда я щелкаю мышью по значку и заголовку соседней панели, его цвет меняется, но после того, как моя мышь опустится, цвет останется неизменным.
Как это сделать, когда мой главный экран открыт, мой главный экран никогда не меняет цвет заголовка, когда мой другой экран открыт, тогда на главном экране никогда не меняется цвет заголовка, по умолчанию черный.

Подробнее здесь: https://stackoverflow.com/questions/754 ... n-react-js