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