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?
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.
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
Great question! It looks like styled components does provide this with a
createGlobalStyleAPI, 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
createGlobalStylewould be if you had a prop you wanted to pass into it e.g. you could pass in aisDarkModeboolean to inform what colour to render the font / background color with.Great. I'll read about the createGlobalStyle API. Thanks so much for answering. :D