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)
  };
})

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

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

1 个答案: