It's been a while since I post something here (Really busy, sorry!) and I will start to do it again with a polemic opinion. First, it's important to say that this is completely an opinion and I'm not trying to say "Don't use it!!", but creating a space to discuss some things I do not like about StyledComponents and why I don't use it.
This is probably the main reason and I mean, it's weird...There is no natural syntax about
const Wrapper = styled.div` width: 30px; `
What the heck is that string template after the div?! (I know what it is, but come on). It's used to do function callings, method callings, prop passing, but it's weird to get used to tagged template literals for CSS at least.
If you see this:
export const MyComponent = () => ( <Button /> )
<Button /> a component or a Styled-Component? Can be both and we have to search for it and, depending on how big your project is, can be a pain in the a$$.
Some code editors (sometimes VsCode does this) even have problems going to the code line when you
cmd + click the Styled-Components making it a little awkward to track.
Sometimes even it's exported from a "General" style file and that makes it even harder to know what you have to do or fix.
Some projects use:
const StyledWrapper = styled.div``
to differentiate between a React Component and a Styled-Component, but there's not a real convention.
You can easily build a
React Context API that could manage the theming for the whole app and can be accessed anywhere you want. You can even build a simple
useTheme() custom hook to make it more descriptive and can manage a lot of things without installing another dependency on your project.
Again, I'm not saying that Styled-Components are bad or that the creators are bad people or something, this is just my personal opinion based on projects that I've been working with.
Do you have a different opinion? Do you think just like me? Do you like to add something to the post? Do it in the comments below!
I do this completely non-profit, but if you want to help me you can go here and buy me a coffee ;)