如何使用Material UI创建一个圆形复选框？

Question

我尝试匹配的设计要求复选框为圆形。我正在使用带有React的Material UI。

边框半径不起作用，因为实际图标的边框不是可见复选框的边框。

我不能只使用像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>

我想保留Material UI的<Checkbox>的工作代码，但只是改变一些样式，使边缘成为一个完美的圆圈（就像一个单选按钮，但在中间有一个复选标记。

Answer 1

材料qazxsw poi qazxsw poi。有圆形的qazxsw poi，对于空的圆圈，你可以作弊并使用Checkbox输入的图标（它们是相同的大小，所以它完美地工作）：

supports custom icons

......它看起来像这样（foo是checked circle Material icons，bar是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 />}
  …
/>

Answer 2

看看我是否理解你并试试这个：

CheckCircleOutline