在 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>

  );

}

网上试试：

https://codesandbox.io/s/amazing-golick-rjmcs?fontsize=14&hidenavigation=1&theme=dark

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

<span

  class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-8 MuiCheckbox-root MuiCheckbox-colorSecondary makeStyles-root-85 MuiIconButton-colorSecondary"

  aria-disabled="false"

>

  <span class="MuiIconButton-label">

    <input

      class="PrivateSwitchBase-input-11"

      type="checkbox"

      data-indeterminate="false"

      value=""

    /><svg

      class="MuiSvgIcon-root"

      focusable="false"

      viewBox="0 0 24 24"

      aria-hidden="true"

      role="presentation"

    >

      <path

        d="M22 11h-4.17l3.24-3.24-1.41-1.42L15 11h-2V9l4.66-4.66-1.42-1.41L13 6.17V2h-2v4.17L7.76 2.93 6.34 4.34 11 9v2H9L4.34 6.34 2.93 7.76 6.17 11H2v2h4.17l-3.24 3.24 1.41 1.42L9 13h2v2l-4.66 4.66 1.42 1.41L11 17.83V22h2v-4.17l3.24 3.24 1.42-1.41L13 15v-2h2l4.66 4.66 1.41-1.42L17.83 13H22z"

      ></path>

    </svg>

  </span>

  <span class="MuiTouchRipple-root"></span>

</span>