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和style。有时候除了这样做之外别无他法，例如：在颜色选择器，滑块等，其中一些属性基于用户交互

只需关注standard React inline style guideline

即可

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

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

1 个答案: