我尝试匹配的设计要求复选框是一个圆圈。我将 MUI 与 React 结合使用。
边框半径不起作用,因为实际图标的边框不是可见复选框的边框。
我不能只使用 Font Awesome 之类的东西,因为它实际上需要选中和取消选中。
// Current Styling
const styles = theme => ({
nested: {
paddingLeft: theme.spacing.unit * 4,
},
icon: {
margin: theme.spacing.unit,
fontSize: 25,
},
root: {
color: cyan['A400'],
'&$checked': {
color: cyan['A400'],
},
},
checked: {},
});
// Actual checkbox code
return (
// Holds the individual step with edit icon and delete icon
<>
<ListItemIcon>
{/* Checkbox */}
<Checkbox
type="checkbox"
defaultChecked={step.completed}
onChange={this.onChange}
value="true"
classes={{
root: classes.root,
checked: classes.checked,
}}
/>
</ListItemIcon>
我想保留 MUI Checkbox
的工作代码,但只是更改一些样式以使边缘成为完美的圆(类似于单选按钮,但中间有一个复选标记。
最佳答案
Material 的复选框
supports custom icons .有通告checked circle Material icons ,对于空圆圈,您可以稍微作弊并使用 Radio
输入图标(它们大小相同,因此效果很好):
import Checkbox from '@material-ui/core/Checkbox';
import CircleChecked from '@material-ui/icons/CheckCircleOutline';
import CircleCheckedFilled from '@material-ui/icons/CheckCircle';
import CircleUnchecked from '@material-ui/icons/RadioButtonUnchecked';
…
<Checkbox
icon={<CircleUnchecked />}
checkedIcon={<CircleChecked />}
…
/>
// or with filled checked icon:
<Checkbox
icon={<CircleUnchecked />}
checkedIcon={<CircleCheckedFilled />}
…
/>
…它看起来像这样(foo 是 CheckCircleOutline
,bar 是 CheckCircle
):
关于javascript - 如何用 MUI 制作一个圆形复选框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54332350/