React 自定义 Material-UI 图标样式

Question

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

  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 IconButtn

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>
  );
}