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

Question

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

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

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,

}))

Answer 1

也许这就是您所追求的（或类似目标）const StyledButton = styled.button((props) => {  const disabledStyles =  {    color: 'grey',    'background-color': 'grey',  };  return {    color: 'red',    ...(props.disabled && disabledStyles)  };})我绝对不明白为什么您不能使用上面的三元方法，但是我对项目也有一些奇怪的要求。祝你好运