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

Question

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

这是正常的 css 模块场景：

// 我的组件.scss

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

// 我的组件.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 和 style。有时您将别无他法，例如在颜色选择器、滑块等中，其中某些属性基于用户交互

只需遵循标准的 React 内联样式指南

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