用对象声明的样式化组件中的媒体查询

Question

我将 react-native 中的样式组件编写为 js 对象：

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

是否可以使用具有上述对象样式的媒体查询？

Answer 1

是的，这是可能的。您只需要用引号将您的对象键括起来，以根据媒体查询规则形成一个字符串。

例如：

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

Media queries in styled-component declared with object