react-jss vs styled-jss recommendations

[hburrows]

Please direct me elsewhere for this question if this is not an appropriate place... I've used react-jss for a while and it's great (good job to you all !!). I just discovered styled-jss in the process of evaluating styled-components and styled-jsx. styled-jss seems like an excellent alternative to styled-components for the jss ecosystem. What I'm trying to understand is when to use react-jss vs styled-jss and any differences/gotchas that I should be aware of. When authoring a component I completely understand the difference.... but is it OK/recommended to use both together? react-jss auto attaches/detaches where styled-jss appears to inject one big stylesheet during bootstrap... If I'm writing a shared component library is there anything I should be aware of using one vs the other.... My desire is probably to use both together and that appears to work fine.. but I'm curious if there are any "best practices" or "recommendations" on how best to think about using them and when to use one vs. the other.

[kof]

is it OK/recommended to use both together?

Totally, it is mostly a syntactic choice.

[hburrows]

Thanks for the quick response and confirmation that it's really a syntactic choice. I have 2 followup questions that I'd appreciate some clarity on...

1. Does styled-jss auto attach/detach stylesheets (like react-jss) or place all styles in one big stylesheet.

2. Any issues using styled-jss in a shared component library or via a code-split project where the styled component is not initially loaded (this is really a follow on to the above question about auto attach/detach and how the stylesheet gets maintained)

[kof]

Does styled-jss auto attach/detach stylesheets (like react-jss) or place all styles in one big stylesheet.

It uses one sheet, but it is still lazy, means only styles you use are actually added

Any issues using styled-jss in a shared component library or via a code-split project where the styled component is not initially loaded

We are not aware of any. If you have some specific situation in mind I would need to understand al the details of it in order to assume. Best thing to do is to try and come up with issues if any and I am sure we can fix them.

[hburrows]

Again, thanks for the prompt response. I'm not aware of any issues and looking at the code nothing stands out as a potential problem with shared component libraries. I primarily asked because sometimes it's not obvious and it's problematic with styled-jsx which otherwise is great. I'll be using styled-jss (along with react-jss via material-ui) in shared component libraries so if I run into anything will let you know.

Great work on all the cssinjs packages. They're easy to use, work really well, and I really like the philosophy behind them.

[kof]

it's problematic with styled-jsx

What problems did you encounter there?

[hburrows]

I haven't actually tried styled-jsx from a shared library and now after reading a bit further maybe it's not a problem. facebook/create-react-app#1173 and vercel/styled-jsx#172 made me initially doubtful. My biggest current impediment with styled-jsx is that it doesn't work with create-react-app without ejecting (to add the required babel plugin) or complex setup (which defeats the purpose). I'm very happy with react-jss and styled-jss at this point.

[iraycd]

What about React Native Support?