Медиа-запросы не работают в файлах JSX (React)

Question

Итак, я пытаюсь заставить приложение реагировать без bootstrap, но каждый раз, когда я добавляю медиа-запрос в компонент реакции (файл jsx) CSS (src / App. css) , это просто не работает. Я попытался сделать то же самое в public / index. html и его стилях . css, и он там работает. например, у меня есть компонент под названием NavBar.jsx src / Components / NavBar.jsx , который я вызываю в моем src / App. js, и я стилизовал его с помощью src / Приложение. css, и все работает нормально, кроме медиа-запросов

Вот компонент NavBar

import React from "react";
function NavBar(){
  return <div class = "NavBar">
    <div class = "background-foundation">
      <div class = "list" >
      <div><li class = "items"><a href="#">Home </a></li></div>
      <div><li class = "items"><a href="#">About</a></li></div>
      </div>
    </div>
  </div>
}
export default NavBar;

Вот его CSS

.background-foundation{
  background-color:#035aa6; 
  padding : 20px 0px;
  width: 70%;
  margin: auto;
  border-radius: 50px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
}
@media screen and (max-width: 480px) {
  .background-foundation{
    width :90%;
    background-color: black;
  }
} 

Answer 1

Не используйте class, попробуйте className

import React from "react";
function NavBar(){
  return <div className = "NavBar">
    <div className = "background-foundation">
      <div className = "list" >
      <div><li className = "items"><a href="#">Home </a></li></div>
      <div><li className = "items"><a href="#">About</a></li></div>
      </div>
    </div>
  </div>
}
export default NavBar;