Как лучше стилизовать компоненты React?

Question

[Иван]

На сколько понимаю указывать стили для каждого элемента отдельно - плохая идея. Использовать один css файл который потом импортируется в index.js тоже плохая практика.
Читал про styled-components, но есть какие-то ещё хорошие варианты? Негласный стандарт?

Comments

[Даниил Маслов]

как вы поняли, что указывать стили для каждого элемента — плохая идея?

[Иван]

s0xzwasd, цитата из документации на официальном сайте реакта

Встроенные стили — это плохо?
CSS-классы, как правило, лучше для производительности, чем встроенные стили.

[Даниил Маслов]

BenderIsGreat34, вы понимаете, что такое встроенные стили?

[Иван]

s0xzwasd, hover итд

[Даниил Маслов]

BenderIsGreat34, htmlbook.ru/samcss/sposoby-dobavleniya-stiley-na-s... — заголовок «Внутренние стили», в документации говорится именно про них

[Даниил Маслов]

BenderIsGreat34, создавать стили в отдельном файле для каждого компонента — хорошая практика

[Иван]

s0xzwasd, в целом я о таком вот написании имею ввиду. оно не очень читабельно, как на мой взгляд

<h1 style={{color: "#FF8C00", backgroundColor: "#FF2D00"}}>Good {timeOfDay}!</h1>

[Даниил Маслов]

BenderIsGreat34, вы на одном уровне вложенности с компонентом создаете такой же css файл, например Dumb.css и туда добавляете стили для компонента, в основном файле компонента импортируете их

[Даниил Маслов]

BenderIsGreat34, https://ru.reactjs.org/docs/faq-structure.html#gro...

[Иван]

s0xzwasd, Спасибо, не дошёл ещё до этого раздела. Тогда для чего нужен styled-components? Раз можно просто всё в отдельном файле прописывать и не засорять скрипт стилями

[Даниил Маслов]

BenderIsGreat34, это ещё как один из подходов. попробуйте оба и выберите тот, который нравится и удобен именно вам.