Могу ли я использовать модули CSS и встроенный стиль вместе на компоненте React в SSR?

Question

Я могу использовать isomorphic-css-loader заставить модуль css работать на рендере на стороне сервера. Но мне действительно нужно динамически добавлять встроенный стиль в HTML-тэг реагирующего компонента. Это так же, как стиль по умолчанию с модулем CSS, стиль обновления с встроенным стилем. Можно ли использовать их одновременно? совсем как модуль Radium + css в SSR...

Вот обычный сценарий модуля CSS:

// MyComponent.scss

.root { padding: 10px; }
.title { color: red; }

// MyComponent.js

import React, { PropTypes } from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from './MyComponent.scss';

function MyComponent(props, context) {
  return (
    <div className={s.root}>
      <h1 className={s.title}>Hello, world!</h1>
    </div>
  );
}

export default withStyles(s)(MyComponent);

Я бы хотел:

function MyComponent(props, context) {
  stylesSet.custom = {
      fontSize,
      marginTop
    };

  return (
    <div className={s.root} style={[stylesSet.custom]}>
      <h1 className={s.title}>Hello, world!</h1>
    </div>
  );
}

Answer 1

Вы можете смешивать className и стиль. Иногда у вас не будет другого выхода, кроме как сделать это, например, в палитрах цветов, ползунках и т. Д., Где некоторые свойства основаны на взаимодействии с пользователем

Просто следуйте стандартному руководству по встроенному стилю React

    <div className={s.root} style={stylesSet.custom}>