gpt4 book ai didi

css - 将颜色设置为 Reactstrap Navlink

转载 作者:行者123 更新时间:2023-12-03 13:40:38 28 4
gpt4 key购买 nike

我想将我的 react 组件(Navlink)设置为“白色”。主页和日志链接始终为暗:(白色永远不会被设置。我使用Reacstrap、Bootstap 4。我把js和css分开了这是我的代码:

侧边栏.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>
);
}
}

和侧边栏.css

.sidebar {
display: flex;
flex-direction: column;
background: #29363d;
width: 200px;
height: 844px;
}
.test {
font-family: sans-serif;
color: #fff;
}

最佳答案

有两种方法可以做到这一点(如果其他人需要的话):

This page on NavLink显示了两种方法:

  1. 使用类名

上面的页面定义了以下内容:

“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>
  • 希望它能帮助别人!

    关于css - 将颜色设置为 Reactstrap Navlink,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49195684/

    28 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com