Have you used styled components and what do you think about it? | Hacker News Reader

Have you used styled components and what do you think about it?

5 pointsbotvader6 comments

Almost ready with a simple tool to translate CSS as styled-components that I plan to launch this week. I just wanted to know what do you guys think about styled-components?

View on HN

I love styled components for React. They are a great way to separate the styling logic from JSX, yet keeping it at a glance in the same file as the component. Essentially, you don’t have to remember CSS classes name. It is also a great way to have very granular styling when needed. The fact that you can encapsulate the component in another styled component makes it so that you can have general styles and more specific ones whenever you want. I would personally recommend it over css files for any react project.

Also, if you are using a react framework such as material UI or ant design, styled components make it very easy to change the style of those without braking anything.

You mean https://www.styled-components.com/ ? I am curious how the components can be themed? My understanding is web components use shadow dom isolating their dom tree from the outer document so wasn’t sure if it is possible to have an outer document css file provide theme colors to the components?

Are you asking something along these lines: https://css-tricks.com/styling-a-web-component/, not clear on how both questions are related.

styled-components is a module used specifically with react.js (i.e. not web components).

Theming is actually handled quite nicely[1]. Essentially, you create a JS object which represents your theme (colours, fonts, spacing etc.) and pass it to a provider component. This will then provide the theme object to any components beneath it in the component tree, so you can pull out values and use them to style your app.

[1] https://www.styled-components.com/docs/advanced#theming

I do not think that it provides much more value than other simpler solutions already do. I might be wrong, so please correct me, but the main problem styled-component solves is already solved by css-module. In this light, styled-component seems an unnecessary abstraction and a whole new set of APIs to learn for no tangible benefit.

can't provide props aka the theming options in `css-modules`. I think, `styled-components` seems like an extension to css-module.

Reply on news.ycombinator.com