Media queries in styled-component declared with object

Question

I write styled components like in react-native, as a js object:

const SectionTitle = styled.div({
  fontSize: '25px',
  display: 'flex',
})

Is it possible to use media queries with the above object style?

Answer 1

Yes, this is possible. You just need to wrap your object keys with quotes to form a string from a media query rule.

For example:

const SectionTitle = styled.div({
  fontSize: '25px',
  display: 'flex',
  '@media(min-width: 788px)': {
    fontSize: '40px'
  }
})