I'm working on my own project by plan "from Zero to Hero" my friend told me about styled components and I've decided to replace my clear .css and move to styled components.
I know how it works in basic. <MyComponent> and than const MyComponent = styled.div css, css, css
Im strugling about these 2 situations
<div className={color ? 'header header-bg' : 'header'}> How to code it for styled components? Like <MyComponent={color ? 'header header-bg' : 'header'}> But than i dont know what else..
In clear styles I have many situations like
.class1, .class2, .class3 { styles }
How can I write it in styled components, please? For now, I have 3 times the same code for every class1-3, and that's not good. Also i tried something like const Class1, Class2 = styled.div but it doesn't work
you can pass the props in styled components instead of ternary operators, here the link you can see the example Add background color conditionally in styled components
and const Class1, Class2 = styled.div this will not work, you should have do like this
const Class1 = styled.div``
const Class2 = styled.div``
const Class3 = styled.div``
And you should learn about the styled components from this link