我可以在 SSR 中的 React 组件上同时使用 css 模块和内联样式吗？答案

【问题标题】：Can I use css modules and inline style together on React component in SSR?我可以在 SSR 中的 React 组件上同时使用 css 模块和内联样式吗？
【发布时间】：2016-09-23 14:37:36
【问题描述】：

我可以使用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>
  );
}

【问题讨论】：

标签： reactjs universal isomorphic-javascript inline-styles css-modules

【解决方案1】：

您可以混合使用 className 和 style。有时您别无他法，只能这样做，例如在颜色选择器、滑块等中，某些属性基于用户交互

只要关注standard React inline style guideline

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

【讨论】：

是的，我已经同时使用css模块和镭了，谢谢！ :)