是否可以将道具传递给样式组件的“css”元素？答案

【问题标题】：Is it possible to pass props to "css" element of styled components?是否可以将道具传递给样式组件的“css”元素？
【发布时间】：2019-04-25 05:50:38
【问题描述】：

我可以用 styled.div 做到这一点

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

如何使用样式化的组件 css 元素做类似的事情？

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

目前我的解决方案是创建一个工厂函数

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

【问题讨论】：

【解决方案1】：

你是怎么拥有它的：

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

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

然后

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

希望对您有所帮助。

【讨论】：