JSX样式无法与NextJS中的@ media-query一起正常使用

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的那部分甚至在浏览器的Inspect元素中都不可用

系统信息

操作系统： Manjaro Linux

浏览器： Chrome

Next.js的版本： ^ 9.1.8-canary.13

我也问了这个问题here

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和(之间没有空格。