CODEWITHSUNDEEP
reactjsuniversalisomorphic-javascriptinline-stylescss-modules
Seven Lee
Seven Lee

Reputation: 627

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

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

Upvotes: 1

Views: 6462

Answers (1)

Grgur
Grgur

Reputation: 7392

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}>

Upvotes: 2

Related Questions