如何解决链接处于活动状态时,如何更改navLink中使用的素材图标样式?
这是我的代码:
import React from "react";
import "./sidebar.scss";
import HomeOutlinedIcon from "@material-ui/icons/HomeOutlined";
import InfoOutlinedIcon from "@material-ui/icons/InfoOutlined";
import ChatOutlinedIcon from "@material-ui/icons/ChatOutlined";
import LanguageIcon from "@material-ui/icons/Language";
import { NavLink } from "react-router-dom";
<div className="sidebar__Wrapper">
<div className="iconsContainer">
<div className="icons">
<NavLink to="/">
<HomeOutlinedIcon className="iconsDefaultStyle" />
</NavLink>
<NavLink to="/worldwide">
<LanguageIcon className="iconsDefaultStyle" />
</NavLink>
<NavLink to="/importantinfo">
<InfoOutlinedIcon
className="iconsDefaultStyle"
fontSize="default"
/>
</NavLink>
</div>
</div>
</div>
我最初在NavLink
中使用Material UI图标,但是图标的颜色是灰色,但是我想在链接处于活动状态时更改图标的颜色,我的意思是:
当我单击图标时,必须更改图标的颜色,这将指示当前链接处于活动状态。我通过对每个链接使用单独的状态来完成此操作,当单击特定图标时,它将更改类,但这会使我的代码很冗长。还有其他方法可以实现这一目标吗?
解决方法
您可以将代码修改为具有这种格式
import { Link,useLocation } from "react-router-dom";
import MenuItem from '@material-ui/core/MenuItem';
const { pathname } = useLocation();
<MenuItem className={pathname === "/worldwide" ? "active": "inactive"}
component={Link} to="/worldwide">
<LanguageIcon className="iconsDefaultStyle" />
</MenuItem>
想法是您从React路由器获取当前路径名,并且对于每个链接,您将编写一个条件,如果该路径名与该路由匹配,则该条件成立。 (请参见https://stackoverflow.com/a/50614553/8323067上的原始内容)
在这里您可以根据相同的条件(as mentioned by @Phobos)将className设置为css类
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。