相关疑难解决方法(0)

我已尝试匹配的设计需要一个复选框为圆形。我在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>但只是更改一些样式以使边缘成为一个完美的圆（如单选按钮，但在中间带有对号）。

有人可以告诉我，当您单击角度材料复选框时，如何更改圆形的颜色。下图所示（粉红色圆圈）

这是官方网页上的链接：https : //material.angular.io/components/checkbox/overview

谢谢您的帮助