Question

我想将颜色“白色”设置为我的反应组件（Navlink）。家和日志链接总是黑暗的:( 永远不会设置白色。我使用Reacstrap，Bootstap 4。我用jss分开js 这是我的代码：

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;
}

Answer 1

有两种方法（如果有人需要）：

page展示了两种实现方式：

使用className

以上页面定义了以下内容：

“ className”应在CSS中定义默认的（当前未激活）NavLink样式；

'activeClassName'定义活动页面的NavLink CSS样式。

所以在您的代码中

<NavLink to="/" className="inactive" activeClassName="active" exact={true}>Dashboard</NavLink>

然后在CSS中使用（除了_base.scss以外，其他任何CSS文件都不对我有用-因此，如果不起作用，请在_base.scss中尝试使用它）

.inactive {
    color: #fff;
    text-decoration: none;
}

.active {
    color: red;
    text-decoration: none;
  }

（请注意：例如参见其他人准备的This page on NavLink）

使用“样式”和“ activeStyle”：

<NavLink to="/" style={{color: 'white', textDecoration: 'none'}} activeStyle={{color: 'red', textDecoration: 'none'}}>Home</NavLink>

希望它对某人有帮助！

Answer 2

我认为这个问题可能是“光”属性：

<Navbar color="faded" light>

似乎要覆盖CSS配置。我发现删除'light'对我来说解决了类似的问题。

另一种方法是在节点级别标记中使用内联样式：

<NavLink style={{color: 'white'}}  ...etc.

......但这很重复。

Answer 3

要覆盖bootstrap默认着色的规则集如下

.navbar .navbar-nav>li>a, .navbar .navbar-nav>li>a:hover {
   color: #fff;
}

Answer 4

我有类似的问题。我使用以下方法解决了这个问题：

<Navbar fixed="top" expand="md" style={{ backgroundColor: "#233" }}>

确保您不使用浅色/深色。这样可以防止自定义。

<NavLink className="inactive">

然后添加CSS：

.inactive {
    color: #fff;
}

.inactive:hover {
    color: #fed136;
}

Answer 5

对于白色文本颜色

将你的黑暗道具改为white

例如

            <Navbar color='success' dark expand='md' fixed='top'>

将颜色设置为Reactsrap Navlink

5 个答案: