我可以将css模块和内联风格一起使用在SSR中的React组件上吗？

Question

我可以使用isomorphic-css-loader使css模块在服务器端呈现时工作.但我确实需要在react组件html标记上动态添加内联样式。它就像css模块的默认样式，使用内联样式的更新样式.有可能同时使用吗？就像SSR中的Radium + css模块.

下面是正常的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和风格。有时，您将别无选择，只能这样做，例如在颜色选择器、滑块等中，其中一些属性是基于用户交互的。

只要跟着标准反应内嵌式指引

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