I have a React.js app with Typescript. I want to disable visited Material Icons coloring on an anchor tag and I have the following stylesheet.
const useStyles = makeStyles((theme: Theme) =>
createStyles(
myAnchor: {
"&:visited": {color: "inherit"},
"&:hover": {color: "inherit"},
"&:active": {color: "inherit"}
}
...
)
const classes = useStyles();
But it did not work when I did <a className={classes.myAnchor}><FacebookIcon /></a>
. Did I get anything wrong with "&:visited"
?
You can use 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>
);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.