Реагируйте, чтобы настроить стили Material-UI Icons

Question

У меня есть приложение React. js с Typescript. Я хочу отключить раскраску посещенных значков материалов на теге привязки, и у меня есть следующая таблица стилей:

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