是否可以将props传递给样式组件的“ css”元素?

时间:2018-11-22 14:06:51

标签: javascript reactjs styled-components

我可以使用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 个答案:

答案 0 :(得分:1)

您如何拥有它:

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

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

然后

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

希望有帮助。