- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想将我的 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显示了两种方法:
上面的页面定义了以下内容:
“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/
我的 Navlink 按钮的事件类有问题我的代码如下所示: Page NavLink isActive 不知何故无法正常工作。只有当我点击按钮时,它才会将类更改为事件状态,但在我释放按钮后它又不再事件
在 React 项目中,我创建了如下图所示的带有一些链接的菜单,我还更改了链接的背景颜色和事件时文本的颜色,但是,我想更改图标图像,即它会替换事件时的图标图像。那么什么是合适的解决方案呢? 下面是供您
为了重现这个问题,我创建了一个 MenuItemComponent Fetch data 然后将组件包含到 NavMenu 文件中 Porcellu
我目前有一个我正在连接的字符串......请参阅最后的个人资料。我正在尝试包装在来自 react-router-dom 的 NavLink 中连接的 see 配置文件,这是否可能,如果是这样,最好的方
在我的菜单中,我有一个导航链接 - 我的个人资料。当用户点击我的个人资料时, react 重定向到他们的个人资料。然后导航链接按预期设置为事件,同样,应用 isActive 样式。
有没有办法知道 NavLink 何时处于事件状态?像这样的东西?: 最佳答案 您可以使用 NavLink 的 isActive 回调来实现此目的。 isActive 允许您在链接处于事件状态时定义自
我正在使用 react-router 的 NavLink 组件来显示侧边栏菜单,并且在 NavLink 内部有一个图标。我想更改图标,以便当链接处于事件状态时图标被填充。代码是这样的: {ico
我想将我的 react 组件(Navlink)设置为“白色”。主页和日志链接始终为暗:(白色永远不会被设置。我使用Reacstrap、Bootstap 4。我把js和css分开了这是我的代码: 侧边栏
我正在使用 React Router v4,并且我有一个情况,在我的导航链接上,我想为 NavLink 父元素启用 active className,而不是NavLink 本身。 即使我不在 Swit
我正在寻找一种方法来使 NavLink 的“to”属性动态 react 。 let url = 'localhost'=='localhost'? 'foo':''; Home 可以工作,但对于
我想知道如何控制 Navlink 的类名,如果实际路径是 X,则 NavLink 的类是事件的。我在使用 Laravel 和简单的 bootstrap 之前做过它,但我不知道如何用 React 和 R
我正在尝试使用菜单列表来浏览我的应用程序。尽管应用程序和路由运行良好,但我使用这段代码在控制台中收到了一些警告: {props.itemList.map((item, index) =>(
从 Blazor 3.1 Preview 2 开始,应该可以 prevent default navigation behaviour对于 Blazor 中的链接,还有 discussed in th
我已经使用 react 对于像这样的带有 tailwind-css 的事件路由类: import { NavLink } from 'react-router-dom'; Hom
我有几个这样的导航链接: 我希望第二个 Navlink 在两条路线上处于事件状态,/searchplatform和 /search/results . 而且,
我正在使用react router,我想在某种状态下禁用to属性。我传递了空字符串,但这不会禁用链接,而是转到页面的基本路由。我什至尝试传递 null 但这会破坏代码。甚至可以这样做吗? 最佳答案
我实际上正在使用 Fluxible 开发一个应用程序,但我在使用路由参数时遇到了问题。 实际上,我有这个渲染函数: render() { return (
我有一些问题。我从本地 Json 文件获取一个数组并将其放入本地状态。下面,您可以看到我在哪里使用 map 来显示数组手机中的所有型号。当我单击其中之一时,它会创建带有特殊 id 的新链接(包含在数组
Assigned Picked Completed
Styled Components 的新手,我正在尝试找出一种更好的方式来扩展和共享样式。 我有这样的东西: import styled from 'styled-components' import
我是一名优秀的程序员,十分优秀!