Conditionals in CSS object

Question

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

Did you try props => (this.props.hover ? '#fff' : '#000'). Or evaluate outside the object and pass the result in? — Paul Redmond
– Paul Redmond, Commented Sep 25, 2018 at 14:01
Presumably you'd need to define this as a function, which takes props and returns styled.button? — OliverRadini
– OliverRadini, Commented Sep 25, 2018 at 14:02

Meeses · Accepted Answer · 2018-09-25 15:06:41Z

1

try this

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

edited Sep 25, 2018 at 15:06

answered Sep 25, 2018 at 14:41

Meeses

1441 gold badge1 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Conditionals in CSS object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related