Html 反应自定义材质UI图标样式

我有一个带有Typescript的React.js应用程序。我想禁用锚标记上的已访问材质图标着色，我有以下样式表

  const useStyles = makeStyles((theme: Theme) =>
    createStyles(
    myAnchor: {
      "&:visited": {color: "inherit"},
      "&:hover": {color: "inherit"},
      "&:active": {color: "inherit"}
    }
    ...
  )
  const classes = useStyles();

---

但当我执行

时，它不起作用。我是否对

”和：访问的“

”有任何错误？

您可以使用材质UIIconButtn

import React from "react";
import "./styles.css";
import { makeStyles, IconButton } from "@material-ui/core";
import FacebookIcon from "@material-ui/icons/Facebook";

const useStyles = makeStyles(theme => ({
  icon: {
    "& :visited": { color: "red" },
    "& :hover": { color: "red" },
    "& :active": { color: "red" }
  }
}));

export default function App() {
  const classes = useStyles();
  return (
    <div className="App">
      <IconButton
        className={classes.icon}
        // component={Link}
        // to={`/url`}
      >
        <FacebookIcon />
      </IconButton>
    </div>
  );
}

从“React”导入React；
导入“/styles.css”；
从“@material ui/core”导入{makeStyles，IconButton}”；
从“@material ui/icons/Facebook”导入Facebook图标；
const useStyles=makeStyles（主题=>({
图标：{
“&：访问：{颜色：“红色”}，
“&：悬停”：{color:“red”}，
“&：活动”：{颜色：“红色”}
}
}));
导出默认函数App（）{
const classes=useStyles（）；
返回(
);
}

---

您可以使用材质UIIConButton

import React from "react";
import "./styles.css";
import { makeStyles, IconButton } from "@material-ui/core";
import FacebookIcon from "@material-ui/icons/Facebook";

const useStyles = makeStyles(theme => ({
  icon: {
    "& :visited": { color: "red" },
    "& :hover": { color: "red" },
    "& :active": { color: "red" }
  }
}));

export default function App() {
  const classes = useStyles();
  return (
    <div className="App">
      <IconButton
        className={classes.icon}
        // component={Link}
        // to={`/url`}
      >
        <FacebookIcon />
      </IconButton>
    </div>
  );
}

从“React”导入React；
导入“/styles.css”；
从“@material ui/core”导入{makeStyles，IconButton}”；
从“@material ui/icons/Facebook”导入Facebook图标；
const useStyles=makeStyles（主题=>({
图标：{
“&：访问：{颜色：“红色”}，
“&：悬停”：{color:“red”}，
“&：活动”：{颜色：“红色”}
}
}));
导出默认函数App（）{
const classes=useStyles（）；
返回(
);
}

---

这不起作用，但它们之间有什么区别？@tbraden您能更具体地说明什么不起作用吗？我突然想到，这可能是我正在使用的材质图标的问题，我将更新问题我认为真正起作用的是“&”之后的空格，所以

&:visted

不

&:visted

不起作用，但它们之间有什么区别？@tbraden你能更具体地说什么不起作用吗？我突然想到，这可能与我正在使用的材质图标有关，我会更新问题我认为真正起作用的是“&”后面的空格，所以

&:visted

没有

&:visted

@keikai没有error@keikai没有错误