Как изменить стили и значки флажков при наведении указателя мыши на Material-UI React?

Question

Я использую Material-UI в моем проекте, и у меня есть флажок с красным цветом.

Я хотел бы показать отмеченный значок, когда кто-то будет зависать только на флажке.

Это было бы скрыто, когда не зависло. Кажется, я не могу найти подходящий селектор для этого. Я буду рад любым предложениям о том, что я могу с этим поделать.

Answer 1

Некоторые замечания:

• Используйте Material-UI селектор вложенности , чтобы поймать SVG элемент, поскольку <Checkbox /> является элементом lib, который имеет структуру stati c dom.

• Используйте &:hover для перехвата onMouseOver события.

• Используйте d: path(value) для передачи значения реквизита d в 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 />, которую можно увидеть в браузере

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