我可以在SSR中的React組件上一起使用css模塊和內聯樣式嗎？

Question

我可以使用isomorphic-css-loader使css模塊在服務器端呈現工作。但我真的需要在反應組件html標籤上動態添加內嵌樣式。它就像使用css模塊的默認樣式，具有內嵌樣式的更新樣式。是否有可能在同一時間使用它們？就像鐳+ SSR的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}>