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