Реагировать Как создать отдельную таблицу стилей для конкретного компонента?

Question

Здесь я хочу создать отдельную таблицу стилей для компонента Landing и, надеюсь, для другого.Другие компоненты также будут иметь компонент Hero.Может кто-нибудь сказать мне, как я могу это сделать?Это хорошая идея?

Answer 1

Что-либо с подчеркиванием _name.scss сообщает вашему компилятору sass, что это частичный файл scss.Просто не используйте подчеркивание для однокомпонентных файлов scss, например: Hero.scss.Затем в вашем Hero.js вы можете импортировать стиль следующим образом:

import './Hero.scss';

<div className="heroContainer">...</div>

или, если ваш веб-пакет настроен на импорт модулей scss, вы можете сделать:

import { heroContainer } from './Hero.scss';

<div className={heroContainer}>...</div>

Если вы хотите поделиться стилями heroContainer с другими таблицами стилей, просто используйте @extend в своем файле scss.

clientsContainer {
  @extend .heroContainer;
}

Недостатком этого подхода является то, что вам придется вручнуюимпортировать любые партиалы, такие как _vars.scss, _mixins.scss ... и т. д., и любые другие зависимые таблицы стилей в каждый новый файл Example.scss.

В идеале, если вы работаете в большой команде, лучше индивидуализировать ваши таблицы стилей scss, чтобы все было модульным (компоненты и их стили можно было передавать кому-то другому, а не отправлять ВСЕиз ваших таблиц стилей для одного компонента).