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

Posted 2023-02-22

【中文标题】样式 JSX 无法与 NextJS 中的 @media-query 一起正常工作

【英文标题】：Style JSX is not working properly with @media-query in NextJS

【发布时间】：2020-05-28 03:52:01

【问题描述】：

我在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 元素中都不可用

系统信息

操作系统：Manjaro Linux

浏览器：Chrome

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

我也问过这个问题here

【问题讨论】：

能把整个组件代码分享给我们吗？

我没有在帖子中这样做很糟糕。不幸的是，我可以在几个小时内完成，因为我现在不在工作。但是一旦我到达那里，我将分享整个组件。

【参考方案1】：

这是当前代码

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

这是固定代码

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

问题是媒体查询中and 和( 之间没有空格。

【讨论】：

下次尝试使用 CSS linter ;)