CODEWITHSUNDEEP
javascriptreactjsstyled-components
Jad S
Jad S

Reputation: 3015

Is it possible to pass props to "css" element of styled components?

I can do this with a styled.div

styled.div`
    color: ${props=> props.color || 'black'};
`

How can I do something similar with a styled components css element?

const BlackBGCSS = css`
    color: ${props=> props.color || 'black'};
`

For now my solution is to create a factory function

const BlackBGCSS = (props)=> css`
    color: ${props=> props.color || 'black'};
`

Upvotes: 14

Views: 12518

Answers (1)

Ricardinho
Ricardinho

Reputation: 1339

Kind of how you have it:

const myCSS = css`
    background: ${({ myColor }) => myColor || `black`};
`;

const MyComponent = styled('div')`
    ${myCSS};
`;

Then

<MyComponent myColor="red">Hello World</MyComponent>

Hope that helps.

Upvotes: 21

Related Questions