Kann ich css-Module und Inline-Style zusammen auf React-Komponente in SSR verwenden?

Question

Ich kann isomorphic-css-loader verwenden, um CSS-Modul auf serverseitigen Rendern zu machen. Aber ich muss den HTML-Tag react component wirklich dynamisch hinzufügen. Es ist genau wie der Standard-Stil mit CSS-Modul, der Update-Stil mit Inline-Stil. Ist es möglich, sie gleichzeitig zu benutzen? wie Radium + CSS-Modul in SSR ...

Hier ist das normale CSS-Modul Szenario:

// 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); 

Ich möchte:

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

Sie können Klassenname und Stil mischen. Manchmal haben Sie keine andere Möglichkeit, als dies zu tun, z. in Farbauswahl, Schieber, etc, wo einige Eigenschaften auf Interaktion mit dem Benutzer

Folgen Sie einfach der standard React inline style guideline

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