悬停材质 UI 图标和文本答案

【问题标题】：Hover Material UI Icon and Text悬停材质 UI 图标和文本
【发布时间】：2021-02-15 05:48:31
【问题描述】：

我正在做一个 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 元素的模块文件和用于 materia UI 项目的材料 UI makestyles。

所以我不能设置整体的悬停。我尝试设置 headItem 类，但它不起作用

【问题讨论】：

标签： css reactjs material-ui

【解决方案1】：

我建议进行一些更改，第一个是我更喜欢像这样导入 css 样式，因为您可以将类用作常规字符串

import "./styles.css";

假设你的 styles.css 有这个类，它只是为你的面包屑应用常规样式。

.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 类作为字符串引用，然后我们只需使用字符串插值添加材质ui 类变量。我有这个沙箱，你可以在其中看到结果：

https://codesandbox.io/s/still-pine-0v2jw

【讨论】：