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

Question

I can use isomorphic-css-loader to make css module work on server-side render. But I really need to dynamically add in-line style on the react component html tag. It is just like the default style with css module, the update style with in-line style. is it possible use them at the same time? just like Radium + css module in SSR...

Here is the normal css module scenario:

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

I would like to :

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

You can mix className and style. Some times you will have no other way but to do it, e.g. in color pickers, sliders, etc where some properties are based on user interaction

Just follow the standard React inline style guideline

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