Как перезаписать материал-ui className с помощью Афродиты?

Question

Я использую React и стилизую некоторые иконки. Я использую библиотеку Material-UI для своих компонентов. Одним из компонентов, которые я использую, является FontIcon. У него уже есть className, и я не могу переопределить его, переданный в стиле Афродиты.

<FontIcon className="material-icons">
    bug_report
</FontIcon>

Если я установлю стиль для этого элемента управления, он работает нормально:

<FontIcon className="material-icons" style={{ color: 'red' }}>
  bug_report
</FontIcon>

Как вы можете перезаписать существующее имя класса? Я пробовал:

className={css(['material-icons', styles.colorize])}
className={css('material-icons', styles.colorize)}
className={('material-icons', css(styles.colorize))}

Спасибо!

Answer 1

Проблема в том, что этот компонент не позволяет передавать пользовательские className свойство, только способность расширяться с style один, как вы можете видеть в их определении PropTypes.

Material-ui использует стиль в форме JS и на самом деле не хочет иметь дело с "нормальным" CSS, хотя я согласен, что иногда его проще переопределить.

Вы можете обернуть ваш компонент в div, который вы даете своему className и вместо этого стилизовать детей. Appart от выполнения запроса, есть не так много выбора.