How to make a circle checkbox with Material UI?

问题

The design I have been given to try to match requires a checkbox to be a circle. I'm using Material UI with React.

Border radius does not work because the border of the actual icon is not the border of the visible checkbox.

I can't just use something like Font Awesome, because it needs to actually be checked and unchecked.

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

I want to keep the working code of Material UI's <Checkbox> but just change some styling to make the edges a perfect circle (like a radio button but with a checkmark in the middle.

回答1:

Material's Checkbox supports custom icons. There are circular checked circle Material icons, and for the empty circle, you can cheat a bit and use the icon for Radio input (they are the same size, so it works perfectly):

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 />}
  …
/>

…and it looks like this (foo is CheckCircleOutline, bar is CheckCircle):

回答2:

to see if I understood you and try this:

    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"
        />
)}

来源：https://stackoverflow.com/questions/54332350/how-to-make-a-circle-checkbox-with-material-ui

标签

javascript

reactjs

material-ui