我在我的項目中使用material-ui，并且有一個紅色的復選框。當有人僅將鼠標懸停在復選框上時，我想顯示選中的圖標。不懸停時它會隱藏。我似乎沒有找到合適的選擇器。我希望能得到任何關于我能做些什么的建議。
1 回答
蝴蝶刀刀
TA貢獻1801條經驗 獲得超8個贊
一些注意點：
使用 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>
- 1 回答
- 0 關注
- 111 瀏覽
添加回答
舉報
0/150
提交
取消