Style JSX 在 NextJS 中不能与 @media-query 一起正常工作

Question

我在 Next JS 中使用 <style jsx> 来设计我的组件。编译该代码时 @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 元素中都不可用

系统信息

OS: 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 和 ( 之间没有 space。

Style JSX is not working properly with @media-query in NextJS