javascript - 如何在 React styled-components 的模板文字中定义的单个回调中使用多个道具

Question

几天前，我开始在我的 React 项目中使用样式化组件，但我无法使用多个道具来定义组件中的样式。问题的要点是这样的：

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>

问题是，每次我需要为我的组件添加额外的配置（如颜色和大小）时，我都必须在模板文字中添加另一个回调。

有没有办法用一行代码应用所有内容而不添加单独的回调？

标签： javascriptcssreactjsstyled-components

Answer 1

styled 还接受一个传递 props 的函数：

const MyComponent = styled.div(({color, size}) => `
 max-width: 240px;
 font-size: 12px;
 color: ${color ? color : '#ffffff'};
 `${sizes[size]}`
`

我正在使用解构，但您可以根据自己的props喜好保留它。