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?

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

来源：https://stackoverflow.com/questions/53443376/media-queries-in-styled-component-declared-with-object