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 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>

  );

}