Как сделать флажок по кругу с помощью Material UI?

Question

Дизайн, который мне дали попробовать, требует, чтобы флажок был кругом.Я использую Material UI с 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>

Я хочу сохранить рабочий код пользовательского интерфейса <Checkbox> пользовательского интерфейса, но просто изменить некоторые стили, чтобы сделать края идеальным кругом (например, радиокнопка, но с галочкой в ​​середине.

Answer 1

, чтобы увидеть, понял ли я вас, и попробуйте это:

    class RadioButtons extends React.Component {
  state = {
    selectedValue: '',
  };

  handleChange = event => {
    this.state.selectedValue === 'a' ?
    this.setState({ selectedValue: '' }) :
    this.setState({selectedValue: event.target.value})
  };

  render() {
    return (
      <div>
        <Radio
          checked={this.state.selectedValue === 'a'}
          onChange={this.handleChange}
          value="a"
          name="radio-button-demo"
          aria-label="A"
        />
)}

Answer 2

Материал Checkbox поддерживает пользовательские значки .Имеются круглые отмеченные кружком значки материалов , а для пустого круга можно немного обмануть и использовать значок для ввода 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):