【问题标题】: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

    【讨论】:

      猜你喜欢
      • 2019-03-24
      • 1970-01-01
      • 2021-11-15
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-03-05
      • 1970-01-01
      • 2021-02-09
      相关资源
      最近更新 更多