Composition with styled-components or emotion
When I use styled-components or emotion, it often happens that I want to extend more than only one component to another one. But I don't only want to extend, I also want to extend in certain situations directly via props. So I read lots of issues on styled-components' github page and I finally found a solution which I find great.
Imagine this:
1// MyElement.js2const MyElement = styled.div``
Alright, you want know to extend it.
1// Base.js2const Base = styled.div``34// MyElement.js5const MyElement = styled(Base)``
Lovely.
But now, you want to extend it by another one again. Ha! Tough right?
The idea is to do that:
1// base.js2const base = css``34// anotherBase.js5const anotherBase = css``67// MyElement.js8const MyElement = styled.div`9 ${base}10 ${anotherBase}11`
Boom! 💥
Bonus: you could use it depending on certains props like:
1// base.js2const base = css``34// anotherBase.js5const anotherBase = css``67// MyElement.js8const MyElement = styled.div`9 ${base}1011 ${({ active }) =>12 active &&13 css`14 ${anotherBase}15 `}16`
That's great, right?!
If you have any other idea to extend it in a better way, feel free to contact me on Twitter. Thanks! Bye bye!