如何在MUI5 Checkbox中保留背景色并移除白色边框？

要实现保留白色背景但去掉白色边框，你可以从SVG的描边样式入手，或者调整Checkbox内部元素的边框属性，下面是几个实用的方案：

方案1：直接隐藏SVG的描边 #

给.MuiSvgIcon-root添加描边透明或取消描边宽度的样式，同时确保勾选标记颜色正常：

MuiCheckbox: {
  styleOverrides: {
    root: {
      ".MuiSvgIcon-root": {
        backgroundColor: "white",
        stroke: "transparent", // 把边框设为透明
        strokeWidth: 0 // 或者直接取消描边宽度
      },
      // 强制设置勾选标记颜色，避免被背景影响变透明
      '& .MuiCheckbox-checkmark': {
        color: '#000' // 可根据你的需求改成其他颜色
      }
    },
  },
},

方案2：针对SVG内部的path元素调整 #

你的Checkbox图标边框是由SVG里的path描边实现的，也可以直接给path设置样式：

MuiCheckbox: {
  styleOverrides: {
    root: {
      ".MuiSvgIcon-root": {
        backgroundColor: "white",
        '& path': {
          stroke: 'transparent' // 隐藏path的描边
        }
      },
      '& .MuiCheckbox-checkmark': {
        color: '#000'
      }
    },
  },
},

额外情况处理 #

如果发现上面的方法没生效，可能是Checkbox根元素自带边框，这时候可以直接给根元素去掉边框：

MuiCheckbox: {
  styleOverrides: {
    root: {
      border: 'none', // 移除根元素的边框
      ".MuiSvgIcon-root": {
        backgroundColor: "white",
      },
      '& .MuiCheckbox-checkmark': {
        color: '#000'
      }
    },
  },
},

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