I am using material-ui in my project, and I have a Checkbox with a red color.
I would like to show checked Icon when someone would hover on Checkbox only.
It would be hidden when not hovered. I don't seem to find the proper selector for that. I would love any suggestions about what can I do about it.
Some notice points:
Use Material-UI nesting selector to catch the SVG element since the <Checkbox /> is a lib element which has a static dom structure.
Use &:hover to catch onMouseOver event.
Use d: path(value) to pass props d's value to SVG's child element <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>
);
}
Try it online:
Refer: the <Checkbox /> structure which can be seen in browser
<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>
