React MUI 5 не может перезаписать стили по умолчанию пользовательскими стилями ⇐ CSS

[Anonymous]

Я пытаюсь перезаписать стили кнопок MUI 5 по умолчанию пользовательскими стилями (используя либо withStyles, либо имя класса (определенное с помощью makeStyles), но стили по умолчанию всегда находятся сверху. из пользовательских. Проблема с withStyles была решена путем добавления этих стилей к глобальным переопределениям стилей при определении темы, но стили на основе className являются проблематичными.
Как Могу ли я решить эту проблему? Ниже приведены несколько скриншотов странного поведения.
Изменить: файл стиля, используемый для определения пользовательских стилей:

Код: Выделить всё

import { Theme } from '@mui/material';
import { makeStyles } from '@mui/styles';

const BTN_WIDTH = 160;
const BTN_MIN_HEIGHT = 34;

export default makeStyles((theme: Theme) => ({
btn: {
width: BTN_WIDTH,
minHeight: BTN_MIN_HEIGHT,
paddingLeft: theme.spacing(2),
paddingRight: theme.spacing(2),
}
}));

^ Скриншот со стилями соответствующей кнопки. (Некоторые стили по умолчанию были удалены, чтобы уместиться на одном скриншоте). Вы можете увидеть, что стили по умолчанию перезаписывают отступы, установленные пользовательскими стилями.


Подробнее здесь: https://stackoverflow.com/questions/786 ... ned-styles