Javascript 如何在React样式化组件的模板文本中定义的单个回调中使用多个道具

几天前，我已经开始在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>

常数大小={
lg:css`
宽度：200px；
高度：120px；
字体大小：22px；
`,
md:css`
宽度：140px；
高度：80px；
字号：18px；
`
}
const getColor=（color）=>css`color:${color}`
常量MyComponent=styled.div`
最大宽度：240px；
字体大小：12px；
颜色：“#ffffff”；
${props=>getColor（props.color）}
${props=>size[props.size]}
`
....

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

---

是否有一种方法可以用一行代码应用所有内容，而不添加单独的回调？

styled也接受传递道具的函数：

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

我正在使用解构，但如果您愿意，可以将其保留为

props