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

Posted by botvader on Tuesday October 01, 2019 @06:51AM
from the self-post dept.

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?

( 6 comments | 5 points | on HN )

Re:Have you used styled components and what do you think abo... by oliverx0 on Wednesday October 02, 2019 @07:24AM (#21135239)

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.

[ Parent | on HN ]

Re:Have you used styled components and what do you think abo... by taf2 on Tuesday October 01, 2019 @07:21AM (#21124126)

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?

[ Parent | on HN ]

Re:Have you used styled components and what do you think abo... by botvader on Tuesday October 01, 2019 @08:08AM (#21124391)

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

[ Parent | on HN ]

Re:Have you used styled components and what do you think abo... by tomvalorsa on Tuesday October 01, 2019 @03:34PM (#21129623)

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

[ Parent | on HN ]

Re:Have you used styled components and what do you think abo... by stockkid on Tuesday October 01, 2019 @08:37AM (#21124634)

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.

[ Parent | on HN ]

Re:Have you used styled components and what do you think abo... by botvader on Wednesday October 02, 2019 @11:33AM (#21137554)

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

[ Parent | on HN ]