Question

因此，我试图在没有引导的情况下使React应用程序响应，但是每次我在react组件的（jsx文件）CSS （src / App.css）中添加媒体查询时，它都无法正常工作。我尝试在 public / index.html 及其 styles.css 中执行相同的操作，并且该功能在此起作用。例如，我有一个名为NavBar.jsx src / Components / NavBar.jsx 的组件，该组件在我的 src / App.js 中调用它，并且使用 src / App.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;

媒体查询不适用于JSX文件（反应）

1 个答案: