对象表示法中的条件样式组件答案

【问题标题】：Conditional styled-components in object notation对象表示法中的条件样式组件
【发布时间】：2019-09-15 10:50:14
【问题描述】：

样式化组件文档没有提到这种情况，我无法弄清楚语法。

我将如何打开这个样式化的组件：

const StyledButton = styled.button`
  color: red;
  ${props => props.disabled && css`
    color: grey;
    background-color: grey;
  `}
`

转入对象符号：

const StyledButton = styled.button(props => ({
  color: 'red',
  ------
}))

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

const StyledButton = styled.button(props => ({
  color: props.disabled ? 'grey' : 'red',
  backgroundColor: props.disabled ? 'grey' : transparent,
}))

【问题讨论】：

请澄清您的问题。
您要求做某事，而问题看起来就像您已经完成了您所要求的。有什么问题？
我需要像第一个示例一样将禁用部分保留在单独的块中。最后一个例子是可以为这个例子做的，但不会解决我的实际用例。

标签： javascript reactjs styled-components jss

【解决方案1】：

也许这就是你所追求的（或类似的）

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

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

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

【讨论】：

你是最棒的！这正是我所需要的。谢谢?