Как правильно подключать стили в React?

Question

[mishapsv]

Есть готовая верстка, для стилей - SASS. И как обычно: общий файл стилей подключается в шапке.
Сейчас стоит задача переписать все Реакт-компонентами.
И вот вопрос: как правильно будет организовать их подключение? Оставить как есть или инлайнить?

Что вы посоветуете(способ, инструменты)? Какие могут быть подводные камни?

Answer 1

[ennam]

Посмотрите на решение, которое используется, например, здесь:
https://github.com/anorudes/redux-easy-boilerplate
Позволяет импортировать sass и инкапсулировать его.
Загляните в /src/components/Items
чтобы лучше понять

В самом сасс файле можно писать любую вложенность.
То есть можно писать:

:local(.styles) {
  .title {
  }
}

Далее просто импортируем в js и вставляем сгенерированное инкапсулированное имя класса через className

Comments

[mishapsv]

ennam Спасибо за ответ!
А в чем преимущество такого подхода? Стоит ли усложнять, в чем минусы обычного подключения?

[ennam]

mishapsv: Преимущество в том, что стили никогда не будут пересекаться со стилями других компонентов.
Можно придумывать любые имена классов. С таким подходом также не требуется бэм

[mishapsv]

ennam По-прежнему не очевидны преимущества) Я и так использую БЭМ для наименования классов, он хороший. Проблем переопределения стилей не бывает.