任何人都可以帮助改变复选框边框宽度在材料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,
},
},
2条答案
按热度按时间6yt4nkrj1#
只需在复选框样式中添加stroke和strokeWidth,它将减少borderWidth:
vptzau2j2#
材质复选框与图标配合使用,可以通过图标进行勾选和未勾选,这里是一个例子,