将颜色设置为 Reactstrap Navlink
set color to Reactsrap Navlink
我想为我的 React 组件 (Navlink) 设置颜色 "white"。
主页和日志 link 总是黑暗的:(
永远不会设置白色。
我使用 Reacstrap、Bootstap 4。
我用 css 分隔 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;
}
您要覆盖的规则集bootstrap的默认颜色如下
.navbar .navbar-nav>li>a, .navbar .navbar-nav>li>a:hover {
color: #fff;
}
我认为问题可能出在 'light' 属性 中:
<Navbar color="faded" light>
似乎覆盖了 CSS 配置。我发现删除 'light' 为我解决了类似的问题。
另一种方法是在节点级标签中使用内联样式:
<NavLink style={{color: 'white'}} ...etc.
...但这变得非常重复。
有两种方法(如果有人需要的话):
This page on NavLink 展示了两种实现方式:
- 使用类名
以上页面定义如下:
'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 Codepen.IO example)
使用'style'和'activeStyle':
<NavLink to="/" style={{color: 'white', textDecoration: 'none'}} activeStyle={{color: 'red', textDecoration: 'none'}}>Home</NavLink>
希望对大家有所帮助!
我有类似的问题。我用这个解决了这个问题:
<Navbar fixed="top" expand="md" style={{ backgroundColor: "#233" }}>
请确保您不使用 light/dark。它会阻止自定义。
<NavLink className="inactive">
然后添加 css:
.inactive {
color: #fff;
}
.inactive:hover {
color: #fed136;
}
白色文字颜色
将你的黑暗道具更改为white
例如
<Navbar color='success' dark expand='md' fixed='top'>
我想为我的 React 组件 (Navlink) 设置颜色 "white"。 主页和日志 link 总是黑暗的:( 永远不会设置白色。 我使用 Reacstrap、Bootstap 4。 我用 css 分隔 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;
}
您要覆盖的规则集bootstrap的默认颜色如下
.navbar .navbar-nav>li>a, .navbar .navbar-nav>li>a:hover {
color: #fff;
}
我认为问题可能出在 'light' 属性 中:
<Navbar color="faded" light>
似乎覆盖了 CSS 配置。我发现删除 'light' 为我解决了类似的问题。
另一种方法是在节点级标签中使用内联样式:
<NavLink style={{color: 'white'}} ...etc.
...但这变得非常重复。
有两种方法(如果有人需要的话):
This page on NavLink 展示了两种实现方式:
- 使用类名
以上页面定义如下:
'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 Codepen.IO example)
使用'style'和'activeStyle':
<NavLink to="/" style={{color: 'white', textDecoration: 'none'}} activeStyle={{color: 'red', textDecoration: 'none'}}>Home</NavLink>
希望对大家有所帮助!
我有类似的问题。我用这个解决了这个问题:
<Navbar fixed="top" expand="md" style={{ backgroundColor: "#233" }}>
请确保您不使用 light/dark。它会阻止自定义。
<NavLink className="inactive">
然后添加 css:
.inactive {
color: #fff;
}
.inactive:hover {
color: #fed136;
}
白色文字颜色
将你的黑暗道具更改为white
例如
<Navbar color='success' dark expand='md' fixed='top'>