search

cssinjs / styled-jss

Styled Components on top of JSS.
http://cssinjs.org/styled-jss
MIT License
217 stars 25 forks source link

react-jss vs styled-jss recommendations #31

Closed hburrows closed 7 years ago

hburrows commented 7 years ago

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 commented 7 years ago

is it OK/recommended to use both together?

Totally, it is mostly a syntactic choice.

hburrows commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

it's problematic with styled-jsx

What problems did you encounter there?

hburrows commented 7 years ago

I haven't actually tried styled-jsx from a shared library and now after reading a bit further maybe it's not a problem. https://github.com/facebookincubator/create-react-app/issues/1173 and https://github.com/zeit/styled-jsx/issues/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 commented 5 years ago

What about React Native Support?