在 Material-UI React 中将鼠标悬停在复选框上时如何更改复选框样式和图标？

Question

我在我的项目中使用material-ui，并且有一个红色的复选框。

当有人仅将鼠标悬停在复选框上时，我想显示选中的图标。

不悬停时它会隐藏。我似乎没有找到合适的选择器。我希望得到任何关于我能做些什么的建议。

Answer 1

一些注意点：

• 使用 Material-UI嵌套选择器来捕获 SVG 元素，因为它<Checkbox />是一个具有静态 dom 结构的 lib 元素。

• 用于&:hover捕获onMouseOver事件。

• 用于d: path(value)将 propsd的值传递给 SVG 的子元素<path />

import React from "react";
import "./styles.css";
import { Checkbox } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";
import AcUnit from "@material-ui/icons/AcUnit";
// import Accessibility from "@material-ui/icons/Accessibility";

const useStyles = makeStyles(theme => ({
  root: {
    background: "#f1f1f1",
    "&:hover": {
      "& span": {
        "& svg": {
          "& path": {
            d:
              "path('M12 2c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm9 7h-6v13h-2v-6h-2v6H9V9H3V7h18v2z')"
          }
        }
      }
    }
  }
}));

export default function App() {
  const classes = useStyles();
  return (
    <div className="App">
      <Checkbox className={classes.root} icon={<AcUnit />} />
    </div>
  );
}

网上试试：

参考：<Checkbox />浏览器中可以看到的结构

import React from "react";
import "./styles.css";
import { Checkbox } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";
import AcUnit from "@material-ui/icons/AcUnit";
// import Accessibility from "@material-ui/icons/Accessibility";

const useStyles = makeStyles(theme => ({
  root: {
    background: "#f1f1f1",
    "&:hover": {
      "& span": {
        "& svg": {
          "& path": {
            d:
              "path('M12 2c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm9 7h-6v13h-2v-6h-2v6H9V9H3V7h18v2z')"
          }
        }
      }
    }
  }
}));

export default function App() {
  const classes = useStyles();
  return (
    <div className="App">
      <Checkbox className={classes.root} icon={<AcUnit />} />
    </div>
  );
}