如何设置MUI CheckBox未勾选状态的填充颜色？

要实现未勾选时填充#DFE0EB颜色，同时保留勾选时#1DFB9D的样式，可通过修改Checkbox的sx属性，针对未勾选状态精准设置样式：

<Checkbox
  sx={{
    // 未勾选状态样式
    "&.Mui-unchecked": {
      backgroundColor: "#DFE0EB",
      color: "transparent", // 隐藏默认空心框颜色，避免遮挡背景
      "&:hover": {
        backgroundColor: "#DFE0EB" // 保持hover时背景色一致，可按需调整
      }
    },
    // 勾选状态样式（保留原有实现）
    "&.Mui-checked": {
      color: "#1DFB9D"
    }
  }}
/>

关键说明 #

• 使用&.Mui-unchecked定位未勾选状态的Checkbox，直接设置backgroundColor为目标色值
• 将未勾选状态的color设为transparent，是因为MUI默认未勾选框的边框、空心样式由color控制，设置透明后不会干扰背景色显示
• 可选添加&:hover样式，确保鼠标悬停时背景色保持一致，避免默认hover效果破坏样式

内容的提问来源于stack exchange，提问作者margherita pizza