Привет,
мы конвертируем большой проект, написанный на Polymer, в React.
Самая большая проблема, с которой мы сталкиваемся, - это отсутствие инкапсулированного стиля.
Я хотел бы инкапсулировать мои файлы sass с инкапсулированными стилями среди моих компонентов.
На всем сайте и в документации React стили почти не упоминаются.
Кроме того, в chrome devtools в плагине React у вас есть все свойства компонента, кроме стиля. (в отличие от инструментов разработки обычного DOM).
Мне очень нравится React, и чем вы занимаетесь, как вы собираетесь подойти к этой проблеме?
Я полагаю, вы видели этот документ о том, как мы делаем встроенные стили: 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.
Самый полезный комментарий
Я полагаю, вы видели этот документ о том, как мы делаем встроенные стили: http://facebook.github.io/react/tips/inline-styles.html
Наши стили ведут себя так же, как стили браузера. У нас еще нет такого чистого решения, как теневой DOM для инкапсуляции стилей, но Интернет уже много лет существует без теневой DOM, поэтому, безусловно, можно разрабатывать веб-сайты, используя собственные правила стиля браузера :).
Одна вещь, которую вы могли бы сделать, - это определить класс сброса стиля, который сбрасывает стили до значений по умолчанию, а затем вы можете переопределить значения по умолчанию с помощью более конкретных селекторов.
В качестве альтернативы вы можете создать базовый объект встроенного стиля, который имеет все ваши стили по умолчанию, импортировать этот объект повсюду, а когда вы хотите применить определенный стиль, вы копируете этот объект и переопределяете стили, которые хотите установить, используя
Object.assign
. Если вы хотите по-настоящему фантазировать, вы можете настроить ваши компоненты для слияния стилей (с созданным вами style-reset-object) автоматически, чтобы ваши веб-разработчики могли просто использовать компоненты, не видя кода сброса стиля.Это мои два цента. cc @spicyj
PS: Поскольку это скорее вопрос использования, чем ошибка в React, я собираюсь закрыть эту проблему. Не стесняйтесь продолжить обсуждение в этой ветке (закрытие проблемы в основном просто снимает ее с наших радаров для целей разработки). Идеальным местом для подобных вопросов был бы StackOverflow.