CSS 对象中的条件

Question

从 2018 年 5 月开始，我们可以在样式化的组件中编写 CSS 对象。

是否可以在对象中包含条件(就像我们对"普通"样式的组件一样(。我无法使以下条件正常工作：

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