React Material-UI: ключ, предоставленный свойству classes, не реализован в undefined

Question

Я пытаюсь переопределить стили Material-UI, используя makeStyles(), как описано в docs .Но у меня появляется предупреждение, когда я передаю имя класса в подпунктах классов от родительского компонента, который не описан в useStyles.Предупреждение говорит:

Предупреждение: пользовательский интерфейс материала: ключ label, предоставленный свойству классов, не реализован в undefined.Вы можете переопределить только одно из следующих: root.

Пример в Codesandbox

Я знаю, если я раскомментирую label: {} в useStyles, эта ошибка исчезнет.Но я делаю библиотеку компонентов, поэтому могут быть переданы все атрибуты компонента Button, как описано здесь .

Итак, вопросы:

1. Действительно ли мне нужно перечислить все эти реквизиты Button?
2. Как мне установить приоритеты применения стилей (стили внутри компонента useStyles будут иметь более низкий приоритет, чем имена классов, передаваемых через реквизит)?

Answer 1

Вы можете просто переопределить makeStyle классы, { ...classes, label: 'my-color2' }, для пример :

export default function ContainedButtons(props) {
  const classes = useStyles(props);

  return (
    <div>
      <Button variant="contained" classes={{ ...classes }}>
        Default
      </Button>
      <Button variant="contained" classes={{ ...classes, label: 'my-color2' }}>
        Default
      </Button>
    </div>
  );
}