DEV Community

Discussion on: Getting started with styled-components in React

Collapse
marinafroes profile image
Marina Costa

Hey Emma, nice article. I've been using Styled Components for a while but I didn't know some of those tips, especially the css helper function. I agree that managing CSS files can be tricky, but sometimes my react components have so many styled-components that I wonder if it's better to use this library anyway. Maybe using this css helper, I can make them cleaner.
Btw, if I want to use some styles across my whole app (let's say using css variable for colours or font-family, etc) would I have to use an CSS file for that anyway or there's a way to have this with styled components?

Thanks
:D

Collapse
emma profile image
Emma Goto 🍙 Author

Great question! It looks like styled components does provide this with a createGlobalStyle API, I've found a Medium article that explains how to use it.

Personally when I've needed global CSS, I do just put it into a regular CSS file. I think it would be more of a preference thing as to how you want to manage your styles. The one benefit of using that createGlobalStyle would be if you had a prop you wanted to pass into it e.g. you could pass in a isDarkMode boolean to inform what colour to render the font / background color with.

Collapse
marinafroes profile image
Marina Costa

Great. I'll read about the createGlobalStyle API. Thanks so much for answering. :D