Как организовать файлы стилизованных компонентов в проекте React

Как мне организовать стилизованные компоненты в проекте React? Я имею в виду, например, у меня есть компонент Navbar, к которому я хочу добавить стиль. Должен ли я создать отдельный файл NavbarStyle и импортировать его в Navbar, создать NavbarStyle в компоненте Navbar или что-то еще? Или это просто для общих компонентов, таких как кнопки?

И для этой и других кнопок - должен ли я создавать отдельные файлы, например, в папке styledComponents или один файл со всеми из них и импортировать только необходимый элемент? Я знаю, что в основном это зависит от наших предпочтений, но я хочу услышать несколько советов по передовой практике (похоже, что документы StyledComponents ничего не говорят об управлении ими в проекте).


reactjs styled-components code-organization project-organization
person Alan Wołejko    schedule 23.05.2017    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Причина, по которой React так популярен, - это свобода и структура проекта, которые вы можете использовать. Есть много хороших и плохих практик структуры проектов, вот мое простое мнение по этому поводу. В нашей компании мы решили отделить каждый компонент своим стилем. Так, например, у каждой кнопки, флажка и т. Д. Есть собственный файл стиля. Мы импортируем все классы прямо в компонент с помощью:

import './checkbox.scss'

Благодаря этому мы напрямую знаем, какой CSS нам нужно отредактировать, вместо того, чтобы искать его в большом сложном файле sass, и это улучшает рабочий процесс.

Вот простой пример:

введите описание изображения здесь

person Working Pig    schedule 23.05.2017
comment
Я считаю, что они имели в виду стилизованные компоненты, у которых нет отдельных таблиц стилей scss. - person loujaybee; 23.08.2017

arrow_upward
1
arrow_downward

Я знаю, что этот вопрос уже довольно старый, но недавно я столкнулся с такой же проблемой. Эта статья была от мне очень помог. По сути, он предлагает переместить стили компонентов в отдельный файл с именем ComponentName.styles.ts, определить стили и сделать его экспортируемым как часть одного объекта, например:

const Button = styled.button`...`;

const Styled = {
  Button
};

export default Styled;

Такой подход позволит вам красиво разделить код компонента и стили его элементов и в то же время сделать только один импорт, например import Styled from "./ComponentName.styles".

person Grigoriy Mikhalkin    schedule 18.10.2020