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

Question

Иван @BenderIsGreat34

junior front-end

React

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

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

Вопрос задан более трёх лет назад
272 просмотра

11 комментариев

Подписаться 2 Простой 11 комментариев

Даниил Маслов @s0xzwasd

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

Написано более трёх лет назад
Иван @BenderIsGreat34 Автор вопроса

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

Написано более трёх лет назад
Даниил Маслов @s0xzwasd

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

Написано более трёх лет назад
Иван @BenderIsGreat34 Автор вопроса

s0xzwasd, hover итд

Написано более трёх лет назад
Даниил Маслов @s0xzwasd

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

Написано более трёх лет назад
Даниил Маслов @s0xzwasd

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

Написано более трёх лет назад
Иван @BenderIsGreat34 Автор вопроса
s0xzwasd, в целом я о таком вот написании имею ввиду. оно не очень читабельно, как на мой взгляд
<h1 style={{color: "#FF8C00", backgroundColor: "#FF2D00"}}>Good {timeOfDay}!</h1>
Написано более трёх лет назад
Даниил Маслов @s0xzwasd

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

Написано более трёх лет назад
Даниил Маслов @s0xzwasd

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

Написано более трёх лет назад
Иван @BenderIsGreat34 Автор вопроса

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

Написано более трёх лет назад
Даниил Маслов @s0xzwasd

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

Написано более трёх лет назад

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

React

Простой
Как решить проблему с манифестом в CRA-приложении?
- 1 подписчик
- 20 часов назад
- 30 просмотров
0

ответов
React

+2 ещё

Средний
Какие есть WYSIWYG редакторы для мини-приложений ВК?
- 1 подписчик
- вчера
- 37 просмотров
1

ответ
JavaScript

+2 ещё

Средний
Как получить актуальные данные в state при использовании server side event (в момент срабатывания события) в компоненте React?
- 1 подписчик
- 20 апр.
- 71 просмотр
1

ответ
React

Простой
Как получить значение из стейта если он еще не обновился?
- 1 подписчик
- 20 апр.
- 51 просмотр
0

ответов
JavaScript

+1 ещё

Средний
Почему не берутся данные из Props при вызове функции ПО КЛИКУ?
- 1 подписчик
- 20 апр.
- 58 просмотров
0

ответов
React

+1 ещё

Простой
Как реализовать Микрофронтенд с использованием Vite с Typescript?
- 1 подписчик
- 19 апр.
- 48 просмотров
0

ответов
React

Простой
У меня react up ложу .env REACT_APP_PASSWORD=пароль Локально все ок Но на гите не видит..почему?
- 1 подписчик
- 19 апр.
- 64 просмотра
0

ответов
HTML

+1 ещё

Простой
Почему не работает pattern на input?
- 1 подписчик
- 18 апр.
- 117 просмотров
2

ответа
React

Простой
Почему не рендерится React-компонент в методе render( )?
- 1 подписчик
- 18 апр.
- 89 просмотров
1

ответ
React

Простой
У меня react up и я беру из .env пароль а мне бьет ошибку, как быть?
- 1 подписчик
- 17 апр.
- 79 просмотров
0

ответов
Показать ещё Загружается…

Frontend React

Glob-com

от 100 000 ₽

JS|React Native разработчик

Венста • Киров

от 60 000 до 120 000 ₽

Frontend developer (React)

Баланс-Платформа • Москва

До 250 000 ₽

Переделать скрипт на питоне (добавить прокси с авторизацией)

23 апр. 2024, в 09:39

500 руб./за проект

Довести разработку flutter приложения до логичного конца

23 апр. 2024, в 09:24

15000 руб./за проект

SMM для HR

23 апр. 2024, в 08:58

15000 руб./за проект

как вы поняли, что указывать стили для каждого элемента — плохая идея?
s0xzwasd, цитата из документации на официальном сайте реакта
Встроенные стили — это плохо?
CSS-классы, как правило, лучше для производительности, чем встроенные стили.
BenderIsGreat34, вы понимаете, что такое встроенные стили?
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, это ещё как один из подходов. попробуйте оба и выберите тот, который нравится и удобен именно вам.

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

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт