CODEWITHSUNDEEP
reactjsstyled-components
Fellow Stranger
Fellow Stranger

Reputation: 34023

Conditionals in CSS object

Since May 2018, we can write CSS objects in styled components.

Is it possible though to have conditionals in the objects (as we can with "normal" styled components). I cannot get the following conditional to work:

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

Upvotes: 1

Views: 66

Answers (1)

Meeses
Meeses

Reputation: 144

try this

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

Upvotes: 1

Related Questions