如何用MUI制作圆形复选框?

How to make a circle checkbox with MUI?(如何用MUI制作圆形复选框?)

本文介绍了如何用MUI制作圆形复选框?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我要尝试匹配的设计要求复选框为圆形。我正在将MUI与Reaction一起使用。

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

我不能只使用像Font Awesom这样的内容,因为它实际上需要选中和取消选中。

// 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 *

本文标题为:如何用MUI制作圆形复选框?