React Starter Kit — передача объекта стиля вместо имени класса

С помощью React Starter Kit Изоморфный загрузчик стилей CSS для Webpack как передать объект стиля вместо имени класса?

В настоящее время мы можем сделать это:

<div className={s.root}>...</div>

и мне интересно, можем ли мы сделать что-то вроде этого:

<FooBar style={s.root.toObject} />

Я ищу решение, которое также работает при рендеринге на стороне сервера.


reactjs css server-side-rendering react-starter-kit isomorphic-javascript
person bjfletcher    schedule 18.02.2016    source источник
comment
Может <FooBar style={s} />? К вашему сведению, isomorphic-style-loader просто добавляет два свойства — s._getCss, s._insertCss к объекту стилей, возвращаемому css-loader. Может быть, вы можете объяснить, какую реальную проблему вы пытаетесь решить? Потому что передача объекта стилей через style={..} prop может быть неправильным способом решения этой проблемы.   -  person Konstantin Tarkus    schedule 18.02.2016
comment
Пример: компонент диалога здесь material-ui.com/#/components/dialog имеет следующие параметры actionsContainerStyle и overlayStyle, которым нужны объекты стилей, а не имена классов.   -  person bjfletcher    schedule 18.02.2016

Ответы (1)


arrow_upward
1
arrow_downward

Я предполагаю, вы хотите преобразовать часть CSS во встроенный объект стиля? Например. .comp { border: 1px solid red; } станет { comp: { borderWidth: 1px, borderStyle: 'solid', borderColor: 'red' }. Для этой задачи вы можете поискать другой пакет NPM (и css-loader, и isomorphic-style-loader предназначены для решения другой проблемы). Попробуйте Radium.

person Konstantin Tarkus    schedule 18.02.2016
comment
.scss будет иметь: .comp { border: 1px solid red; } Тогда я хотел бы { border: "1px solid red" }, с которым я мог бы перемещаться. Возможный? Или мне нужно будет перейти на Redium? - person bjfletcher; 18.02.2016
comment
Да, Radium или аналогичная библиотека, которая преобразует строку CSS в объект JS. - person Konstantin Tarkus; 19.02.2016