我似乎找不到更改 Material UI 中刻度线颜色的方法 MuiCheckbox
所有的 Demo 都展示了如何改变整个复选框的颜色,但在所有的 Demo 中,勾号都是白色的。
如何只改变勾号的颜色?
最佳答案
下面是一种似乎有效的方法。该方法的要点是创建一个框(通过 :after
伪元素),该框略小于支票图标,并具有所需的颜色作为背景色。然后将该框放在“选中”图标后面。
import React from "react";
import { withStyles } from "@material-ui/core/styles";
import FormGroup from "@material-ui/core/FormGroup";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Checkbox from "@material-ui/core/Checkbox";
const CheckboxWithGreenCheck = withStyles({
root: {
"&$checked": {
"& .MuiIconButton-label": {
position: "relative",
zIndex: 0
},
"& .MuiIconButton-label:after": {
content: '""',
left: 4,
top: 4,
height: 15,
width: 15,
position: "absolute",
backgroundColor: "lightgreen",
zIndex: -1
}
}
},
checked: {}
})(Checkbox);
export default function CheckboxLabels() {
const [state, setState] = React.useState({
checkedA: true,
checkedB: false
});
const handleChange = name => event => {
setState({ ...state, [name]: event.target.checked });
};
return (
<FormGroup>
<FormControlLabel
control={
<CheckboxWithGreenCheck
checked={state.checkedA}
onChange={handleChange("checkedA")}
value="checkedA"
color="primary"
/>
}
label="Custom check color"
/>
</FormGroup>
);
}
另一种方法是创建一个包含支票所需颜色的自定义图标,然后通过 checkedIcon
属性使用它,如 Custom icon example在演示中。
关于reactjs - 更改 MuiCheckbox Material UI 中的勾选颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57970631/