我在项目中使用material-ui,并且有一个红色复选框。
当某人仅将鼠标悬停在Checkbox上时,我想显示选中的图标。
如果不悬停,它将被隐藏。我似乎没有找到合适的选择器。如果有任何建议,我将为您提供帮助。
一些注意事项:
使用Material-UI嵌套选择器可以捕获SVG元素,因为该<Checkbox />
元素是具有静态dom结构的lib元素。
使用&: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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句