Я использую компонент Material-UI (Mui) Box, чтобы сэкономить время. Он прекрасно работает большую часть времени, но иногда я сталкиваюсь с проблемами, когда стилизация вступает в противоречие со стилизацией по умолчанию других компонентов Mui. Например, я использую компонент Box, чтобы переопределить правый отступ по умолчанию панели инструментов Mui (см. Рисунок ниже).
Проблема и мой вопрос l ie в том, как теги стиля генерируются из этого кода. Теги стиля, сгенерированные этим компонентом Box, переопределяются тегами стиля, сгенерированными компонентом панели инструментов (см. Рисунок ниже).
Дополнительно, когда Я проверяю эти теги стилей, теги MuiBox определенно вставляются перед большинством других тегов стилей, и они кажутся пустыми. (см. рисунки ниже).
Я перечитывал документы много раз и перепробовал много вещей. Самая многообещающая вещь, которую я смог найти, была в документации для компонента Box:
⚠️ Специфика CSS зависит от порядка импорта. Если вы хотите гарантировать, что стиль упакованного компонента будет переопределен, вам нужно импортировать Box последним. Я пробовал это, но все еще не увенчался успехом (см. Изображение ниже).
Я знаю, что есть несколько способов обойти это ( например, makeStyles, withStyles, встроенные стили,! Важно), но эти стратегии делают использование компонента Box во многих ситуациях несколько бессмысленным. Поэтому мой вопрос заключается в том, как сделать так, чтобы теги стиля MuiBox имели самый высокий приоритет (вставляется последним) и почему они пусты, когда я смотрю на них в DevTools?