更改 MUI 复选框复选标记颜色

Question

React 的

Material UI 的 MUI 库使用容器元素的背景颜色作为复选框内复选标记的颜色。这在浅色模式下效果很好，但在深色背景上我希望复选标记为白色。如何做到这一点？

我尝试设置

color

，但这改变了强调颜色而不是复选标记颜色。我尝试设置

backgroundColor

，但这会在复选框周围留下粗的白色边框。

我还尝试在 SVG 中从头开始构建自己的自定义图标，但我不知道如何让 MUI 附加它用于图标的所有 CSS 类。

我很乐意使用 MUI 图标库中的图标之一，但我没有看到一个支持控制背景颜色和复选标记颜色的图标。

我什至尝试过在复选框后面放置一个绝对定位的

<div>

的巨大技巧，但是当未选中复选框时，这不起作用。我认为一定有更好的方法来做到这一点！

沙盒：https://codesandbox.io/s/mui-checkbox-check-mark-color-ss9dr6

<div
  className="App"
  style={{ color: "white", backgroundColor: "#333", padding: 20 }}
>
  <div>How to get a MUI checkbox with a white checkmark?</div>
  <Checkbox
    defaultChecked
    sx={{
      "& .MuiSvgIcon-root": {
        fontSize: 28,
        color: "green",
        backgroundColor: "white"
      }
    }}
  />
  <Checkbox
    defaultChecked
    sx={{
      "& .MuiSvgIcon-root": { fontSize: 28, color: "green" }
    }}
  />
  <div>
    Desired: white check mark (like left example above) but without the
    white border.
  </div>
</div>

Answer 1

我遇到了一个可能有帮助的解决方法。主要问题是我们无法在材质内调整 SVG 的大小，这导致了边框问题。

<Checkbox
  defaultChecked
  sx={{
    "& .MuiSvgIcon-root": {
      fontSize: 28,
      color: "green",
    },
    "&.MuiCheckbox-root": {
      borderRadius: 0,
      padding: 0,
    },
    "&.Mui-checked": {
      backgroundColor: "white",
    },
    "& svg": {
      scale: "1.4",
    },
  }}
/>;

结果将如下所示。复选框大小可能会略有增加，但添加比例后边框会消失。