CODEWITHSUNDEEP
javascriptreactjsstyled-components
Fellow Stranger
Fellow Stranger

Reputation: 34013

Media queries in styled-component declared with object

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?

Upvotes: 9

Views: 4667

Answers (1)

falinsky
falinsky

Reputation: 7428

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

Upvotes: 13

Related Questions