反應自定義 Material-UI 圖標 styles

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