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

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

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

只要关注standard React inline style guideline

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

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

Can I use css modules and inline style together on React component in SSR?

universal

inline-styles

reactjs

isomorphic-javascript

css-modules