React 应用程序上的 CSS 突然停止工作

Question

我一直在用 React 和 Material UI 编写这个网页，我决定使用普通的 CSS 样式。它到了我关闭代码编辑器并重新打开它的地步，现在某些部分的 CSS 根本没有加载。我不知道发生了什么...

这里是 Codesandbox：https://codesandbox.io/s/github/JojoDuke/fontsnatcher-landing-page?file=/src/App.js

Main.js（一个 CSS 不工作的组件示例）

import './Main.css';
import { Typography } from '@mui/material';
import fonts from '../images/fonts.png';
import podcast from '../images/Podcast.svg'


const Main = () => {
    return (
        <div className="the-div">
            <Typography className="header1" variant="h1">Discover the<img className="img-fonts" src={fonts} alt="fonts" width="320"/> being<br/> used on the web</Typography>
            <Typography className="header2" variant="h4">Fontsnatcher is a Chrome extension for designers and developers 
            that<br/> answers the question, "What font is this website using?"</Typography>
            <button className="hiw-btn">
                See How it works
            </button>

            <div className="illustration">
                <img className="img-podcast" src={podcast} alt="podcast-svg" width="700"/>
            </div>
        </div>
    )
}

export default Main;

Main.css

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;600;700;800;900&display=swap');


.the-div{
    text-align: center;
}

.header1{
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    margin-top: 160px;
}
.img-fonts{
    position: relative;
    top: 30px;
}

.header2{
    font-family: 'Nunito Sans', sans-serif;
    color: #7E7E7E;
}

.hiw-btn{
    color: #ffffff;
    background-color: #00B2FF;
    border: none;
    padding: 10px 30px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 20px;
    margin-top: 50px;
    transition: 0.4s;
  }
.hiw-btn:hover{
    background-color: #67d1ff;
    cursor: pointer;
  }

  .img-podcast{
      margin: -200px auto;
  }

Answer 1

我想如果你重启服务器