CSS-модуль, переопределяющий стили пользовательского интерфейса

Question

поэтому я использую Material UI Components в моем приложении-реактиве, например, для текста кнопки, я хотел бы задать ему margin-top и font-weight, однако я использую CSS-модули, поэтому яя не могу просто переопределить стили CSS по умолчанию, поэтому мне пришлось использовать флаг! важное, есть ли более чистый / лучший подход для этого и избегания использования флага лучше? Вот пример того, как я выгляжу для определенного компонента.

Мне посоветовали использовать атомарный CSS, но мне кажется, что ониВы советуете мне использовать встроенные стили, и это то, чего я хотел избежать для повторного использования в будущем.

TIA

Answer 1

Пройдя по настройке определенных классов CSS, например, для этого веса шрифта и отступа поля, мой новый CSS выглядит как

.loginSignUpLink.priority {
    margin-top: 4%;
    font-weight: 1000;
}

, а мое имя класса выглядит следующим образом

className={classNames(styles.loginSignUpLink, styles.priority)}

Answer 2

Использование важных в CSS не очень хороший способ. Я предпочитаю, чтобы вы использовали родительский класс или тег, чтобы избежать важности. Очень важно, чтобы ваш CSS запускался последним после всех CSS-файлов. Это самое важное. Например, проверьте код ниже.

<div class="test">
   <span class="span"></span>
</div>

Чем записать CSS для диапазона, подобного этому

div.test span.span{ ... }

Кроме того, вы используете больше иерархии дляизбегать важных в css

body div.test span.span{ ... }