CSS 对象中的条件

Question

从 May 2018 开始，我们可以在样式组件中编写 CSS 个对象。

是否可以在对象中使用条件（就像我们可以使用 "normal" 样式组件一样）。我无法让以下条件起作用：

const StyledButton = styled.button({
  backgroundColor: colors.defaultBlue,
  borderRadius: '20px',
  color: props => (props.hover === true ? '#fff' : '#000'),
  border: 'none'
})

Answer 1

试试这个

const StyledButton = styled.button((props) => ({
  backgroundColor: colors.defaultBlue,
  borderRadius: '20px',
  color: props.hover === true ? '#fff' : '#000',
  border: 'none'
}))

CSS 对象中的条件

Conditionals in CSS object

reactjs

styled-components