我正在做一个React JS项目。我在做一些像面包屑一样的东西，里面有一个文字和一个图标。我正在使用物料UI图标。
import UpdateIcon from "@material-ui/icons/Update";
import styles from " myfile.module.css "
<div className={styles.headItem}>
<UpdateIcon
className={classes.bread}
/>
<h1
className={styles.bread}
>
Bread Text
</h1>
</div>
问题:我想设置这个图标+文本的悬停。但是我有用于正常html元素的模块文件和用于物料UI项目的物料UI makestyles。
所以我不能设置整个悬停。我尝试设置headItem类，但它不起作用
我建议做一些改变，第一个是我更喜欢像这样导入css样式，因为你可以使用类作为常规字符串
import "./styles.css";
假设您的styles.css有这个类，它只是为您的breadcrumb应用常规样式。
.head {
text-decoration: underline;
text-transform: uppercase;
}
然后可以在文件中引用该类:
import React from "react";
import UpdateIcon from "@material-ui/icons/Update";
import "./styles.css";
import { makeStyles } from "@material-ui/core";
const useStyles = makeStyles({
bread: {
"&:hover": {
color: "green"
}
}
});
export default function App() {
const classes = useStyles();
return (
<div className={`head ${classes.bread}`}>
<UpdateIcon />
<h1>Bread Text</h1>
</div>
);
}
请注意，我们将styles.css上的css类作为字符串引用，然后我们通过使用字符串插值添加material ui类变量。我有一个沙箱，你可以在那里看到结果:
https://codesandbox.io/s/still-pine-0v2jw
