如何在 Material UI v5 中更改复选框的边框宽度答案

【问题标题】：How To Change BorderWidth of Checkbox in Material UI v5如何在 Material UI v5 中更改复选框的边框宽度
【发布时间】：2021-10-10 10:44:36
【问题描述】：

任何人都可以帮助更改 Material UI v5 中的复选框边框宽度。目前我确实有自定义复选框，我想删除复选框的边框宽度。我尝试了很多解决方案，但都没有奏效。

复选框

 <Checkbox
     defaultChecked
     size="small"
     checkedIcon={<span className={clsx(classes.icon, classes.checkedIcon)} />}
     icon={<span className={classes.icon} />}
 />

样式

 icon: {
      borderRadius: 6,
      width: 24,
      height: 24,
      borderWidth: 25,
      boxShadow: 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)',
      backgroundColor: '#f5f8fa',
    },
    checkedIcon: {
      borderWidth: 20,
      backgroundColor: theme.palette.secondary.main,
      backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
      '&:before': {
        display: 'block',
        width: 24,
        height: 24,
        backgroundImage:
          "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" +
          " fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " +
          "1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E\")",
        content: '""',
      },
      'input:hover ~ &': {
        backgroundColor: theme.palette.secondary.dark,
        borderWidth: 20,
      },
},

【问题讨论】：

你不能传递一个style 道具然后做类似borderLeft: "20px solid", borderRight: "20px solid" 的事情吗？
我尝试在浏览器中直接传递borderWith属性。但它没有用

标签： css reactjs material-ui next.js jss

【解决方案1】：

材质复选框与图标一起使用，您可以为选中和未选中传递图标，这是一个示例，

<Checkbox icon={<FavoriteBorder />} checkedIcon={<Favorite />} name="checkedH" />

【讨论】：