媒体查询在使用 Preact 时没有反映

如何解决媒体查询在使用 Preact 时没有反映

我正在尝试在 react 中使用我现有应用程序的 Preact

@media only screen and (min-width: 320px) and (max-width: 768px) 
    {
      .card {
         margin-top: 12px;
     }
      .card-body {
          padding: 12px;
       }
  }

但是 css 没有反映在 Preact 中，它采用了网站样式的默认样式。

未找到特定文档。

请告诉我它是如何工作的。

提前致谢。

解决方法

这可能是关于 preact-cli 的问题，而不是 Preact 本身。

如果是这样，我猜 CSS 文件将被视为一个 CSS 模块，它将作为任何 classNames 的前缀（并且需要在您的源代码中反映这一点）。作为解决方法，请尝试：

:global {
  @media only screen and (min-width: 320px) and (max-width: 768px) 
  {
    .card {
      margin-top: 12px;
    }
    .card-body {
      padding: 12px;
    }
  }
}