如何在 Gatsby 网站中应用媒体查询？答案

【问题标题】：How to apply media query in Gatsby site?如何在 Gatsby 网站中应用媒体查询？
【发布时间】：2021-09-05 01:14:10
【问题描述】：

这是我的 index.js 代码。

import * as styles from "../styles/home.module.css";
export default function index() {
return (
   
      <section id="#">
        <div
          className={styles.heading}>
          Hello World! 
        </div>
      </section>
}

这是我的 CSS 文件 home.module.css

.heading {
  color: yellow;
}
@media screen and (max-width:768px) {
  .heading{
    color: red;
  }
}

文本的原始颜色保持黄色。我不知道为什么，但是当我调整窗口大小时，颜色不会变为红色。我可以知道我错在哪里或可能的解决方案是什么？

【问题讨论】：

一切看起来都不错。我什至测试了代码，颜色在断点处从黄色变为红色。
我再次编写了一个简单的 Hello World 文本并对其应用了新类，然后介绍了它是如何神奇地开始工作的。

标签： javascript css reactjs react-native react-hooks

【解决方案1】：

首先，你必须导入react。

import * as React from 'react'

你缺少右括号)。

我进行了一些更改，并且效果很好。

import * as React from 'react'
import * as styles from './home.module.css'

const IndexPage = () => (
  <section id="#">
    <div className={styles.heading}>Hello World!</div>
  </section>
)

export default IndexPage

home.module.css

.heading {
  color: yellow;

  @media screen and (max-width: 768px) {
    color: red;
  }
}

【讨论】：

我的原始代码开始工作，因为我对 CSS 文件进行了一些更改。