5 ms·
What do you hate about styled-components?
by cmbsw 9y ago
What do you hate about styled-components?
- choxi 9y agoNot the op, but the big thing is that the styles are just strings instead of a JS object so you lose a lot of the modularity and composability benefits of writing it "in" JavaScript. The syntax was also awkward to me at first: const StyledLink = styled(Link)` color: palevioletred; font-weight: bold; `; I thought in JS you couldn't invoke a function without the parenthesis, but apparently you can if you interpolate the string with backticks first? I've done a lot of JS development and I've never seen that before, so while it's nice that it's cleaner it just got in my way of understanding what's going on. I'd rather just do: const StyledLink = styled(Link)({ color: "palevioltred", fontWeight: "bold" }) It looks basically the same but is immediately intuitive and much more powerful since the styles are objects instead of a string. (Edited for some formatting)
- cmbsw 9y agoStyled components uses tagged template literals so they aren't just strings and are very flexible. This blog post is a great explanation http://mxstbr.blog/2016/11/styled-components-magic-explained/ http://mxstbr.blog/2016/11/styled-components-magic-explained.... For example const Button = styled.button` font-weight: {props => props.active ? 'bold' : 'none'} `; <Button active > This will be bold </Button> I've found it to be very handy.
- choxi 9y agoInteresting. Totally possible that I just never learned the power of tagged template literals, I only tried styled-components for a couple weeks.