0

With React Starter Kit's Isomorphic CSS style loader for Webpack how'd I pass in the style object instead of the class name?

We can currently do this:

<div className={s.root}>...</div>

and I wonder if we can do something like this:

<FooBar style={s.root.toObject} />

I'm looking for a solution that also works when server-side rendered.

bjfletcher
  • 11,168
  • 4
  • 52
  • 67
  • Maybe ``? FYI, `isomorphic-style-loader` just appends the two properties - `s._getCss`, `s._insertCss` to the styles object returned by `css-loader`. Maybe you can explain what actual problem you're trying to solve? Because passing the styles object via `style={..} prop` might not be the right way of approaching this problem.. – Konstantin Tarkus Feb 18 '16 at 11:59
  • Example: the dialog component here http://www.material-ui.com/#/components/dialog has the following options `actionsContainerStyle` and `overlayStyle` which need style objects rather than class names. – bjfletcher Feb 18 '16 at 12:10

1 Answers1

1

I assume, you want to convert a piece of CSS into inline style object? E.g. .comp { border: 1px solid red; } would become { comp: { borderWidth: 1px, borderStyle: 'solid', borderColor: 'red' }. For this task you may want to search for another NPM package (both css-loader and isomorphic-style-loader are intended to solve a different problem). Try Radium.

Konstantin Tarkus
  • 37,618
  • 14
  • 135
  • 121
  • The .scss would have: `.comp { border: 1px solid red; }` Then I'd like `{ border: "1px solid red" }` with which I can pass around. Possible? Or will I need to go Redium? – bjfletcher Feb 18 '16 at 14:58
  • 1
    Yep, Radium or a similar library that converts CSS string into a JS object. – Konstantin Tarkus Feb 19 '16 at 09:42