I recently incorporated styled components into my React project, but I'm encountering difficulty using multiple props to define styles in my components. Here's the crux of the problem:
const sizes = {
lg: css`
width: 200px;
height: 120px;
font-size: 22px;
`,
md: css`
width: 140px;
height: 80px;
font-size: 18px;
`
}
const getColor = (color)=>css`color: ${color}`
const MyComponent = styled.div`
max-width: 240px;
font-size: 12px;
color: '#ffffff';
${props=>getColor(props.color)}
${props=>sizes[props.size]}
`
....
<MyComponent color="blue" size="lg" ></MyComponent>
The challenge lies in the fact that every time I want to add additional configurations (such as color and size) to my component, I have to include another callback in the template literal.
Is there a way to achieve this with a single line of code without the need for separate callbacks?