Javascript 对象表示法中的条件样式化组件

样式化组件文档没有提到这种情况，我也不知道语法

如何打开此样式化组件：

const StyledButton=styled.button`
颜色：红色；
${props=>props.disabled&&css`
颜色：灰色；
背景颜色：灰色；
`}
`

转换为对象表示法：

constyledbutton=styled.button（props=>({
颜色：“红色”，
------
}))

我知道下面将解决这个问题，但对于我的用例，我需要保留第一个示例的逻辑。所以这不适合我：

constyledbutton=styled.button（props=>({
颜色：道具。禁用？“灰色”：“红色”，
背景颜色：props.disabled？“灰色”：透明，
}))

也许这就是你想要的（或类似的）

---

我确实不明白为什么你不能使用上面提到的三元方法，但我在项目上也有一些奇怪的要求。祝你好运

请澄清你的问题。你在要求做某事，而问题的内容看起来好像你完全按照你的要求做了。有什么问题吗？我需要像第一个示例一样将禁用部分保留在单独的块中。最后一个例子是这个例子可以实现的一种方式，但不能解决我真正的用例。你是最好的！这正是我所需要的。谢谢

const StyledButton = styled.button((props) => {
  const disabledStyles =  {
    color: 'grey',
    'background-color': 'grey',
  };

  return {
    color: 'red',
    ...(props.disabled && disabledStyles)
  };
})