我正在使用React-Redux和Material-UI进行样式设计。我有一个<Checkbox />在工具栏上。 工具栏的背景颜色为蓝色(#295ED9)。
当勾选时,我成功地改变了复选框的颜色。 当未勾选时,我还将复选框的轮廓颜色更改为白色。
问题:当未勾选时,我无法改变复选框的背景颜色/填充颜色。 它总是与它所在的工具栏的颜色相同(蓝色-#295ED9)。
我已经尝试更改 <svg> 和 <path> 的 background-color、color、fill 属性为白色。
最好的结果是当我将 <svg> 的 fill 属性更改为白色时。不幸的是,这并不能使复选框在未勾选时填充白色背景。
JSX
<div className="hasBalance">
<FormControlLabel
control={<Checkbox color="primary"/>}
label="Has Balance"
/>
</div>
SCSS
.hasBalance {
grid-area: balance;
.MuiSvgIcon-root {
fill: white;
}
}
Chrome检查工具中的元素
<div class="hasBalance">
<label class="MuiFormControlLabel-root">
<span class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-143 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary" aria-disabled="false">
<span class="MuiIconButton-label">
<input class="PrivateSwitchBase-input-146" type="checkbox" data-indeterminate="false" value="">
<svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="presentation">
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path>
</svg>
</span>
<span class="MuiTouchRipple-root"></span>
</span>
<span class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1">Has Balance</span>
</label>
</div>
目标是将未选中的Material-UI复选框的背景颜色/填充颜色更改为白色。谢谢。