如何在 Gatsby 站點中應用媒體查詢？

Question

這是我的 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;
  }
}

文本的原始顏色保持黃色。 我不知道為什么，但是當我調整 window 的大小時，顏色不會變為紅色。 我可以知道我錯在哪里或可能的解決方案是什么嗎？

Answer 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;
  }
}