Условные выражения в объекте CSS

Question

Начиная с мая 2018 , мы можем писать объекты 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'
}))