Как сделать флажок «Значок» в MaterialUI?

Question

Согласно API Badge https://material -ui.com / api / badge / существует реквизит component, который принимает либо строку для использования элемента DOM, либо компонента.

В моем коде

<Badge color="primary" classes={{ badge: classes.badge }} component="checkbox">
  <Avatar className={classes.orangeAvatar}>AP</Avatar>
</Badge>

ИЛИ

import Checkbox from '@material-ui/core/Checkbox';

<Badge color="primary" classes={{ badge: classes.badge }} component={Checkbox}>
   <Avatar className={classes.orangeAvatar}>AP</Avatar>
</Badge>

В обоих случаях я не получаю флажок в виде значка.Как это сделать?

Answer 1

Использовать флажок компонента.Вы можете использовать компонент для подпорок значков, когда он не отмечен, и проверенных значков, когда отмечен.

      <Checkbox
          icon={<Avatar className={classes.purpleAvatar}> AP</Avatar>}
          checkedIcon={<Avatar className={classes.orangeAvatar}> AP</Avatar>}
        />