如何在 Gatsby 站点中应用媒体查询？

Question

Here is my index.js code.

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

Here is my CSS file home.module.css

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

The original color of the text remains yellow. I don't know why but when I resize the window the color does not change to red. May I know where I am wrong or what is the possible solution?

Answer 1

First of all, you must import react .

import * as React from 'react'

And you are missing close parenthesis ) .

I've made some changes and it works well on my end.

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