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

Question

Styled components 文档没有提到这种情况，我无法理解语法。

我将如何转换这个样式组件：

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

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

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

Conditional styled-components in object notation

javascript

reactjs

styled-components

jss