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

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)

  };

})

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