Стайлинг реагирует на компоненты

Я большой поклонник react. Это действительно удивительный инструмент для построения пользовательского интерфейса, но есть некоторые проблемы, от которых трудно избавиться без проблем.

Один из них-это компоненты стиля, оригинальный "react-way" использует встроенные стили, но это решение имеет некоторые отрицательные качества, например:

  • это не кажется хорошим решением с точки зрения дизайнера
  • достаточно ли он настраиваем?
  • я не могу использовать некоторые из удивительных инструментов, таких как autoprefixer или sass / less, которые делают мои стили более ремонтопригодными

Но есть и положительные:

    Компоненты становятся очень связными и многоразовыми, стили поставляются вместе с ним.
  • когда встроенные стили используются в какой-либо библиотеке, мне не нужно требовать никаких таблиц стилей, стиль весь в моем коде

Другие методы "WriteYourStylesInJS" имеют те же недостатки, и самый большой-Это сокращенный набор инструментов для стилизации (Да, я слишком ленив, чтобы писать префиксы).

Что касается моего фактического вопроса, как вы делаете ваши компоненты react и стили css (или scss/sass или less или любой другой язык) сплоченными?

Как сделать стили настраиваемыми и поддерживаемыми?

Является ли мое предубеждение против встроенных стилей разумным?

2 3
javascript css reactjs web-frontend

2 ответа:

В моем проекте я использовал отдельные css-файлы для стилизации, с тем же именем, что и мои компоненты. В процессе производства он все равно будет уменьшен и разделен в один файл js/css, но вы можете легко копировать/вставлять свои компоненты из проекта в проект.

1

Я использую встроенные стили, и у меня были некоторые проблемы в начале, но знаете что? Я люблю это знать...

  • у меня нет конфликтов стиля. Во всех моих предыдущих проектах, не связанных с реакцией, они у меня были... легко исправить, но мне не нужно беспокоиться об этом сейчас
  • Если мне нужно отредактировать стиль компонента. Я просто иду к компоненту и редактирую его. До... Я должен был проверить классы элемента, а затем перейти к файлу css, чтобы отредактировать его.. и, может быть, я нарушаю стиль другого. элемент с тем же классом!
  • Мне нравится стиль с объектами js. Js везде! Благодаря этому нам не нужно использовать препроцессоры в качестве SCSS, чтобы иметь переменные (просто пример)

Но вы правы, и у вас могут быть головные боли с псевдо-селекторами, такими как: hover... или прексирование поставщиков, даже медиа-запросы.

Итак.. если вам нужно все это, возможно, вам следует проверить Радий

Оставайся дураком!

2