Как решить проблему с таблицами стилей с помощью React?

Question

Я делаю свой проект с React.js. У меня есть три файла scss в моем коде реагирования login.scss, dashboard.css и один основной файл scss с именем index.scss.

У меня есть один общий стиль в моем файле index.scss, и я импортировал оба файла scss в index.scss. Но мои стили переопределяются на моих страницах, поэтому мой дизайн идет неправильно. Как я могу преодолеть эту проблему?

Answer 1

Я предполагаю, что index.scss - это ваш стиль по умолчанию, а dashboard.scss и login.scss - ваши более конкретные таблицы стилей. Поэтому, учитывая конфликт между index.scss и любым другим листом, вы хотите, чтобы конкретным таблицам стилей был дан приоритет. Если это так, вам нужно @import index.scss на другие листы.

CSS читает сверху вниз, поэтому лист внизу, то есть лист , импортирующий другой лист, будет иметь приоритет. Любым классам, тегам и т. Д. С одинаковыми свойствами в index.scss и dashboard.scss будет присвоено свойство из dashboard.scss, если dashboard.scss содержит @import.

Например:

index.scss

.some-class {
   color: red
}

dashboard.scss

@import index.scss
.some-class {
   color: blue;
}

В этом случае элемент с .some-class будет иметь синий шрифт.

В качестве альтернативы, вы можете включить каждый лист на html-странице в теги <link>, с индексом.scss, расположенным вверху, так же, как в HTML применяется то же чтение сверху вниз.

Если в index.scss есть что-то, что вы никогда не хотите перезаписать, вы можете применить !important к этому правилу. Однако по возможности этого следует избегать, и в идеале вы должны писать в dashboard.scss только те вещи, которые вы не хотите перезаписывать index.scss.