React: Как инкапсулировать стили?

Созданный на 5 мар. 2015  ·  6Комментарии  ·  Источник: facebook/react

Привет,
мы конвертируем большой проект, написанный на Polymer, в React.
Самая большая проблема, с которой мы сталкиваемся, - это отсутствие инкапсулированного стиля.
Я хотел бы инкапсулировать мои файлы sass с инкапсулированными стилями среди моих компонентов.
На всем сайте и в документации React стили почти не упоминаются.
Кроме того, в chrome devtools в плагине React у вас есть все свойства компонента, кроме стиля. (в отличие от инструментов разработки обычного DOM).
Мне очень нравится React, и чем вы занимаетесь, как вы собираетесь подойти к этой проблеме?

Question

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

Я полагаю, вы видели этот документ о том, как мы делаем встроенные стили: http://facebook.github.io/react/tips/inline-styles.html

Наши стили ведут себя так же, как стили браузера. У нас еще нет такого чистого решения, как теневой DOM для инкапсуляции стилей, но Интернет уже много лет существует без теневой DOM, поэтому, безусловно, можно разрабатывать веб-сайты, используя собственные правила стиля браузера :).

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

В качестве альтернативы вы можете создать базовый объект встроенного стиля, который имеет все ваши стили по умолчанию, импортировать этот объект повсюду, а когда вы хотите применить определенный стиль, вы копируете этот объект и переопределяете стили, которые хотите установить, используя Object.assign . Если вы хотите по-настоящему фантазировать, вы можете настроить ваши компоненты для слияния стилей (с созданным вами style-reset-object) автоматически, чтобы ваши веб-разработчики могли просто использовать компоненты, не видя кода сброса стиля.

Это мои два цента. cc @spicyj

PS: Поскольку это скорее вопрос использования, чем ошибка в React, я собираюсь закрыть эту проблему. Не стесняйтесь продолжить обсуждение в этой ветке (закрытие проблемы в основном просто снимает ее с наших радаров для целей разработки). Идеальным местом для подобных вопросов был бы StackOverflow.

Все 6 Комментарий

Я полагаю, вы видели этот документ о том, как мы делаем встроенные стили: http://facebook.github.io/react/tips/inline-styles.html

Наши стили ведут себя так же, как стили браузера. У нас еще нет такого чистого решения, как теневой DOM для инкапсуляции стилей, но Интернет уже много лет существует без теневой DOM, поэтому, безусловно, можно разрабатывать веб-сайты, используя собственные правила стиля браузера :).

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

В качестве альтернативы вы можете создать базовый объект встроенного стиля, который имеет все ваши стили по умолчанию, импортировать этот объект повсюду, а когда вы хотите применить определенный стиль, вы копируете этот объект и переопределяете стили, которые хотите установить, используя Object.assign . Если вы хотите по-настоящему фантазировать, вы можете настроить ваши компоненты для слияния стилей (с созданным вами style-reset-object) автоматически, чтобы ваши веб-разработчики могли просто использовать компоненты, не видя кода сброса стиля.

Это мои два цента. cc @spicyj

PS: Поскольку это скорее вопрос использования, чем ошибка в React, я собираюсь закрыть эту проблему. Не стесняйтесь продолжить обсуждение в этой ветке (закрытие проблемы в основном просто снимает ее с наших радаров для целей разработки). Идеальным местом для подобных вопросов был бы StackOverflow.

Я склонен рекомендовать использовать имена классов в стиле БЭМ, которые уникальны в глобальном масштабе и обычно ограничиваются именем компонента:

var MyComponent = React.createClass({
  render: function() {
    return (
      <div className="MyComponent">
        <button className="MyComponent__button">Hi!</button>
      </div>
    );
  }
});

а затем в своем CSS старайтесь избегать использования селекторов потомков в пользу отдельных имен классов. Это способствует разделению стилей и разделению компонентов - это упрощает компоновку компонентов без разрушения стилей.

Костюм - еще один отличный вариант, потому что в нем есть отличные инструменты для носа (переделка) и валидаторы соответствия, которые обеспечивают автоматическую защиту от потери ваших стилей.

Это выглядит интересным решением: https://github.com/Wildhoney/ReactShadow

Другое возможное решение - http://projects.formidablelabs.com/radium/

Я предпочитаю встроенные стили, когда это возможно, а когда это становится слишком сложным, используйте что-то вроде БЭМ, как рекомендовано @spicyj. Мне также нравится SuitCSS, которая, по моему опыту, хорошо сочетается с React.

Была ли эта страница полезной?
0 / 5 - 0 рейтинги