Установить цвет на Reactsrap Navlink
Я хотел бы установить белый цвет для моего компонента реакции (Navlink). Ссылка на главную и журналы всегда темная :( Белый цвет никогда не устанавливается. Я использую Reacstrap, Bootstap 4. Я разделяю js с помощью css Вот мой код:
Sidebar.js
import React from 'react';
import { NavLink as RouterNavLink } from 'react-router-dom';
import { Collapse, Navbar, NavbarToggler, NavbarBrand, Nav, NavItem, NavLink
} from 'reactstrap';
import './Sidebar.css';
export default class Sidebar extends React.Component {
constructor(props) {
super(props);
this.toggleNavbar = this.toggleNavbar.bind(this);
this.state = {
collapsed: true
};
}
toggleNavbar() {
this.setState({
collapsed: !this.state.collapsed
});
}
render() {
return (
<div className = "sidebar">
<Navbar color = "faded" light>
<NavbarToggler onClick = {this.toggleNavbar} className = "mr-2" />
<NavbarBrand href = "/" className = "mr-auto"></NavbarBrand>
<Collapse isOpen = {!this.state.collapsed} navbar>
<Nav navbar>
<NavItem>
<NavLink tag = {RouterNavLink} to = "/"className = "test">Home</NavLink>
</NavItem>
<NavItem>
<NavLink tag = {RouterNavLink} to = "/logs">Logs</NavLink>
</NavItem>
</Nav>
</Collapse>
</Navbar>
</div>
);
}
}
и Sidebar.css
.sidebar {
display: flex;
flex-direction: column;
background: #29363d;
width: 200px;
height: 844px;
}
.test {
font-family: sans-serif;
color: #fff;
}
Я пробую a.test .navbar .navlink{ font-family: sans-serif; color: #fff; }, но цвет все еще темный
Ответы 5
Набор правил, который вы хотите переопределить по умолчанию для начальной загрузки, выглядит следующим образом
.navbar .navbar-nav>li>a, .navbar .navbar-nav>li>a:hover {
color: #fff;
}
@Vana вам нужно будет предоставить снимок экрана перезаписываемого правила в консоли разработчика, только тогда вы сможете увидеть, какое правило заменит текущее.
Я думаю, что проблема может заключаться в «легком» свойстве:
<Navbar color = "faded" light>
Кажется, переопределяет конфигурацию CSS. Я обнаружил, что удаление «света» решило для меня аналогичную проблему.
Альтернативой является использование встроенного стиля в тегах уровня узла:
<NavLink style = {{color: 'white'}} ...etc.
... но это очень часто повторяется.
Это можно сделать двумя способами (если это кому-то нужно):
Эта страница в NavLink показывает оба способа сделать это:
- Использование className
Выше страница определяет следующее:
'className' должно определять стиль NavLink по умолчанию (в настоящее время не активен) в CSS;
activeClassName определяет стиль CSS NavLink активной страницы.
Итак, в вашем коде
<NavLink to = "/" className = "inactive" activeClassName = "active" exact = {true}>Dashboard</NavLink>
затем в CSS (у меня это не сработало ни в одном другом файле CSS, кроме _base.scss, поэтому, если это не сработает, попробуйте его в _base.scss)
.inactive {
color: #fff;
text-decoration: none;
}
.active {
color: red;
text-decoration: none;
}
(Примечание: см., Например, этот пример Codepen.IO, подготовленный кем-то другим)
Использование style и activeStyle:
<NavLink to = "/" style = {{color: 'white', textDecoration: 'none'}} activeStyle = {{color: 'red', textDecoration: 'none'}}>Home</NavLink>
Надеюсь, это кому-то поможет!
У меня была аналогичная проблема. Я решил эту проблему с помощью этого:
<Navbar fixed = "top" expand = "md" style = {{ backgroundColor: "#233" }}>
убедитесь, что вы не используете светлый / темный. Это предотвращает настройку.
<NavLink className = "inactive">
затем добавив css:
.inactive {
color: #fff;
}
.inactive:hover {
color: #fed136;
}
Для белого цвета текста
Измените свой темный реквизит на white
Например
<Navbar color='success' dark expand='md' fixed='top'>
в вашем файле Sidebar.css измените
.testнаa.test, компоненты, связанные с навигационной панелью и навигацией, из начальной загрузки имеют собственную окраску, назначенную дляa; Кроме того, проверьте свою консоль, чтобы увидеть, где установлен набор правил, назначающий темный цвет вашим ссылкам.