Применить цвет радиокнопки, используя стилевые компоненты в Material UI?

Question

В документах UI материалов предоставлен пример кода, показывающий, как можно изменить цвет радиокнопки.

const GreenRadio = withStyles({
  root: {
    color: green[400],
    '&$checked': {
      color: green[600],
    },
  },
  checked: {},
})(props => <Radio color="default" {...props} />);

Я хотел бы повторить это с помощью styled-component вместо, т.е. const StyledRadio = styled(Radio), ноЯ не слишком знаком с синтаксисом, таким как амперсанд и знак доллара - как я могу это сделать?

Answer 1

При использовании стилизованных компонентов с многоязыковым пользовательским интерфейсом CSS применяется к классу root компонента.Если вам нужно применить более конкретный стиль, то вам нужно настроить таргетинг на соответствующий класс.В этом случае вам нужно нацелиться на класс .Mui-checked:

const StyledRadio = styled(Radio)`
  color: ${green[400]};
  &.Mui-checked {
    color: ${green[600]};
  }
`;

Документы MUI действительно хороши тем, что в них перечислены имена классов CSS для каждого компонента.Если вы посетите документацию API для компонента Radio , вы увидите там класс .Mui-checked (в столбце «Глобальные стили»).

Вот рабочий пример кодаПесочница: https://codesandbox.io/embed/styled-components-9pewl

Answer 2

Вот соответствующий синтаксис стилевых компонентов:

const GreenRadio = styled(Radio)`
  color: ${green[400]};
  &.Mui-checked {
    color: ${green[600]};
  }
`;

Связанная документация: https://material -ui.com / customization/ компоненты / # псевдоклассы