Usage with react-jss

[Truedrog]

Hello! I am new to jss. Can you help me?

What you suggest if i want to make this lib friend with react-jss?
As i can see from the documentation createStyleSheet() returns style manager not the actual styles object which react-jss expects.

[reohjs]

It's my understanding that this library was made with material-ui in mind - ideally it should be used instead of react-jss because it would probably lead to duplicate stylesheets.

One example of usage is in the 'next' branch for MUI
Line 70 is where the stylesheet gets rendered manually. Some form of wrapper might be useful here..

[Truedrog]

cssinjs/jss#356
this is relevant.

[ilan-schemoul]

@reohjs Can you elaborate ? This is just about optimization ?

[reohjs]

@NitroBAY React-jss and theme-reactor essentially do the same thing - render and manage jss sheets - so using both is redundant.

Their APIs are also incompatible since theme-reactor creates, registers and attaches the stylesheet in one go, meaning you can't use react-jss to manage them as it only accepts a css rules object or StyleSheet instance (and not a function or callback).

React-jss also doesn't provide any hooks to update ALL of your stylesheets when you change theme, so if you wanted to use react-jss, you would have to make your own theme management system

Theme-reactor uses an inline approach:

render () {
  const classes = this.context.styleManager.render(styleSheet);
}

while react-jss wraps components via injectSheet(styles)(component)

[ilan-schemoul]

Okay so theme-reactor is React-jss + no need to use curried functions because instead of this you're naming the stylesheet, theme-reactor use one <style> (so it's better for performance ?) and finally (most important maybe) it allows to change the theme thanks to the updateTheme.
Am I right

[ilan-schemoul]

Maybe it's not documented but what's cool with material-ui and this package is that they both have clean proper es6 code. You don't go full mad by trying to get what code is supposed to do +1

[reohjs]

Yep, but they both keep stylesheets separate & use multiple <style>

[debradley]

I'm new to jss and, given comments by @reohjs above, I'm confused as to why the docs for jss-theme-reactor have a (broken) link for "React integration". If I want to use jss with my react components and make them themeable, should I be using jss-theme-reactor AND react-jss? Or only one of them and, if so, which?

[ilan-schemoul]

Hello sentences as

it should be used instead of react-jss

Seems to point out that ya should use it either this package or react-jss