Медиа-запросы в style-компоненте, объявленном с объектом

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