reactjs 如何在Material UI v5中更改复选框的BorderWidth

f1tvaqid  于 2023-03-22  发布在  React
关注(0)|答案(2)|浏览(139)

任何人都可以帮助改变复选框边框宽度在材料UI v5.Current我有自定义复选框,我想删除复选框的边框宽度。我尝试了很多解决方案,但没有工作。

复选框

<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,
      },
},
6yt4nkrj

6yt4nkrj1#

只需在复选框样式中添加stroke和strokeWidth,它将减少borderWidth:

stroke: "#ffffff",  stroke-width: 1
vptzau2j

vptzau2j2#

材质复选框与图标配合使用,可以通过图标进行勾选未勾选,这里是一个例子,

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

相关问题