Question

我正在做一个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样式。

所以我无法设置整体的悬停。我尝试设置headItem类，但无法正常工作

Answer 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

悬停材质UI图标和文本

1 个答案: