React 自定义 Material-UI Icons 样式

Question

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

  const useStyles = makeStyles((theme: Theme) =>

    createStyles(

    myAnchor: {

      "&:visited": {color: "inherit"},

      "&:hover": {color: "inherit"},

      "&:active": {color: "inherit"}

    }

    ...

  )

  const classes = useStyles();

但当我这样做时它不起作用<a className={classes.myAnchor}><FacebookIcon /></a>。我是不是搞错了什么"&:visited"？

Answer 1

您可以使用 Material-UI IconButtnimport 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>  );}