Question

这是我的代码：

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图标，但是图标的颜色是灰色，但是我想在链接处于活动状态时更改图标的颜色，我的意思是：

当我单击图标时，必须更改图标的颜色，这将指示当前链接处于活动状态。我通过对每个链接使用单独的状态来完成此操作，当单击特定图标时，它将更改类，但这会使我的代码很冗长。还有其他方法可以实现这一目标吗？

Answer 1

您可以将代码修改为具有这种格式

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类

链接处于活动状态时，如何更改navLink中使用的素材图标样式？

1 个答案: