更改未选中的Material-UI复选框的背景颜色

Question

我正在使用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复选框的背景颜色/填充颜色更改为白色。谢谢。

- Pep

Answer 1

下面是一种看起来可行的方法。这种方法使用":after"伪元素，在SVG后面放置一个白色背景。

import React from "react";
import ReactDOM from "react-dom";
import { withStyles } from "@material-ui/core/styles";
import Checkbox from "@material-ui/core/Checkbox";

const WhiteBackgroundCheckbox = withStyles(theme => ({
  root: {
    color: "red",
    "& .MuiIconButton-label": {
      position: "relative",
      zIndex: 0
    },
    "&:not($checked) .MuiIconButton-label:after": {
      content: '""',
      left: 4,
      top: 4,
      height: 15,
      width: 15,
      position: "absolute",
      backgroundColor: "white",
      zIndex: -1
    }
  },
  checked: {}
}))(Checkbox);

function App() {
  return (
    <div style={{ backgroundColor: "blue" }}>
      <WhiteBackgroundCheckbox />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

相关问题: 如何在MuiCheckbox material UI中更改勾选符号的颜色？

- Ryan Cogswell

---

这让我非常接近，但是它将本来是黑色的勾选框的颜色变为了白色。我查看了您发布的相关问题，但似乎无法与此一起工作。有没有办法将复选框的填充颜色更改为白色，同时保持选中标记为黑色？ - Pep

@Pep，我已经更新了它，不包括“checked”状态。 - Ryan Cogswell

谢谢，这个完美地解决了问题！现在接受答案 :) - Pep

运行得非常好！唯一需要更新的是使用'& .MuiCheckbox-root:not(.Mui-checked):after'选择器，并调整顶部/左侧偏移量，以使其与MUI v5兼容。 - Max Donchenko

Answer 2

MUIv5

已接受的答案在MUIv5中不起作用。 MuiIconButton-label在Checkbox中不再存在，并且它改变了组件的结构。

对于任何在v5版本中遇到问题的人，这里是我有点笨拙的解决方法：

import { Components } from '@mui/material'

const MuiCheckbox: Components['MuiCheckbox'] = {
  styleOverrides: {
    root: {
      '& .MuiSvgIcon-root': {
        zIndex: 1,
      },

      '& .PrivateSwitchBase-input': {
        width: 'auto',
        height: 'auto',
        top: 'auto',
        left: 'auto',
        opacity: '1',
        visibility: 'hidden', // optional

        '&::before': {
          content: '""',
          position: 'absolute',
          background: 'white',
          height: "100%",
          width: "100%",
          visibility: "visible" // optional
        },
      }
    },
  },
}

它依赖于这样一个事实，即如果我们重置其大小和定位属性，则<input>元素会假定恰当的尺寸和位置。这样，该解决方案就能够抵御应用于组件根元素的各种填充和大小属性。据我所知，它不应该破坏任何东西，但是我的MUI经验并不长。

请注意，我在主题配置中将此解决方案定义为全局styleOverride，并且我希望此自定义背景也影响选中的勾号 - 与Ryan的答案混合使用以适应您的情况。

可见性属性是可选的，它们只是确保输入元素保持隐藏（我将其设置为不透明度1，默认值为0）。只需确保您删除两者，如果您不想要它们。

- Michał Czubaj