Стиль JSX не работает с @ media-query в NextJS

Question

Я использую <style jsx> в Next JS для стиля своих компонентов. Когда этот код скомпилирован @media query не выполняется успешно.

Вот моя <style jsx> часть кода

.post__card .summary {
   width: 351px;
}

@media screen and(max-width: 1142px) {
   .post__card .summary {
       width: 80%;
   }
}

Когда код скомпилирован, у меня есть jsx-2993501484 post__card и jsx-2993501484 summary и JS ищет

@media screen and(max-width:1142px) {
    .post__card.jsx-2993501484 .summary.jsx-2993501484 {
        width: 80%;
    }
}

(см. Изображение ниже)

Но по какой-то причине стиль из @media-query не применяется к элементу , Эта часть CSS даже не доступна в элементе проверки в браузере

Система информация

ОС: Manjaro Linux

Браузер: Chrome

Версия Next. js: ^ 9.1.8-канарейка.13

Я тоже задавал этот вопрос здесь

Answer 1

Это текущий код

@media screen and(max-width: 1142px) {
   .post__card .summary {
       width: 80%;
   }
}

Это фиксированный код

@media screen and (max-width: 1142px) {
   .post__card .summary {
       width: 80%;
   }
}

Проблема заключалась в том, что в медиа-запросе не было пробела между and и (.