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'};
`

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'};
`

• javascript
• reactjs
• styled-components

1 Answer 1

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.