反应-始终选择媒体查询CSS样式_Css_Reactjs_Media Queries

反应-始终选择媒体查询CSS样式

css reactjs

反应-始终选择媒体查询CSS样式,css,reactjs,media-queries,Css,Reactjs,Media Queries,我正在构建一个小型React应用程序，希望在屏幕宽度小于576px时隐藏一些元素。我遇到的问题是，媒体查询CSS样式的应用与宽度无关，就好像它根本无法获取宽度一样 Index.html设置为： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name=”viewport” content=”width=device-widt

我正在构建一个小型React应用程序，希望在屏幕宽度小于576px时隐藏一些元素。我遇到的问题是，媒体查询CSS样式的应用与宽度无关，就好像它根本无法获取宽度一样

Index.html设置为：

     <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name=”viewport” content=”width=device-width, initial-scale=1″>
    <meta name="theme-color" content="#000000">
    <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
    -->


    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

编辑添加了HTML代码：

import React from "react";
import classes from "./NavigationBox.css";
import Burgermenu from "../BurgerMenu/BurgermenuIcon.js"
const navBarContainer = (props) => {
    return (
        <div className={classes.navBar}>
            <ul className={classes.headingList}>
                <li className={classes.Brand}>Shop Advisor</li>
                <li className={classes.listItem}>FAQ</li>
                <li className={classes.listItem}>Pricing</li>
                <li className={classes.listItem}>About Us</li>
                <li className={classes.listItemBurger} onClick={props.burgerMenuExpand}><Burgermenu/></li>
            </ul>


        </div>
    );
    };
export default navBarContainer;

从“React”导入React；
从“/NavigationBox.css”导入类；
从“./Burgermenu/BurgermenuIcon.js”导入汉堡菜单
常量navBarContainer=（道具）=>{
返回(

商店顾问
FAQ
定价
关于我们


);
};
导出默认navBarContainer；

还附上了已处理的html：

<!DOCTYPE html>
<!-- saved from url=(0022)http://localhost:3000/ -->
<html lang="en" class="gr__localhost"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="”viewport”" content="”width=device-width," initial-scale="1″">
    <meta name="theme-color" content="#000000">
    <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
    -->


    <link rel="stylesheet" href="./React App_files/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
    <link href="./React App_files/css" rel="stylesheet">
    <link rel="manifest" href="http://localhost:3000/manifest.json">
    <link rel="shortcut icon" href="http://localhost:3000/favicon.ico">
    <!--
      Notice the use of  in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  <style type="text/css">body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}
</style><style type="text/css">.App__App__3Ge-C {
  text-align: center;
}

.App__App-logo__S1Lue {
  -webkit-animation: App__App-logo-spin__2zbnz infinite 20s linear;
          animation: App__App-logo-spin__2zbnz infinite 20s linear;
  height: 80px;
}

.App__App-header__1mzDF {
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
}

.App__App-title__tAcLI {
  font-size: 1.5em;
}

.App__App-intro__2BdAl {
  font-size: large;
}

@-webkit-keyframes App__App-logo-spin__2zbnz {
  from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@keyframes App__App-logo-spin__2zbnz {
  from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
</style><style type="text/css">.TopNavigationsBar__navBar__3rdGx {
    height:28px;
    background-color: #144269;
}</style><style type="text/css">.NavigationBox__headingList__3Cw-y {
    margin-left: 20%;
    padding-top: 2px;
    margin-top: 0px;
}

.NavigationBox__listItem__1wNPR {
    display: inline-block;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    padding-top: 0.2rem;
    font-size: 0.5rem;
    font-weight: 400;
    color: white;
    cursor: pointer;
}

.NavigationBox__Brand__1n3_W {
    font-weight: bold;
    font-size: 0.7rem;
    cursor: default;
    display: inline-block;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    padding-top: 0.2rem;
    color: white;
}

.NavigationBox__listItem__1wNPR:after {
    display: block;
    content: "";
    border-bottom: solid 1px white;
    -webkit-transform: scaleX(0);
        -ms-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transition: -webkit-transform 350ms ease-in-out;
    transition: -webkit-transform 350ms ease-in-out;
    -o-transition: transform 350ms ease-in-out;
    transition: transform 350ms ease-in-out;
    transition: transform 350ms ease-in-out, -webkit-transform 350ms ease-in-out;
}

.NavigationBox__listItem__1wNPR:hover:after {
    -webkit-transform: scaleX(1);
        -ms-transform: scaleX(1);
            transform: scaleX(1);
}

.NavigationBox__listItemBurger__34lVD {
    display: inline-block;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    padding-top: 0.2rem;
    font-size: 0.5rem;
    font-weight: 400;
    color: white;
    cursor: pointer;
    display: none;
}

@media screen and (max-width: 577px) {
    .NavigationBox__headingList__3Cw-y {
        margin-left: 0%;
        padding-left: 0px;
    }
    .NavigationBox__listItem__1wNPR {
        display: none;
    }
    .NavigationBox__listItemBurger__34lVD {
        display: inline-block;
    }
}</style><style type="text/css"></style><style type="text/css">.BurgerMenuLinks__expanded__3lWG1 {
    height: 30px;
    background-color: #144269;
    z-index: 1000;
    position: fixed;
    width: 100%;
    top: 28px;
    -webkit-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
}

.BurgerMenuLinks__notexpanded__3l7KI {
    height: 0px;
    background-color: #144269;
    z-index: 1000;
    position: fixed;
    width: 100%;
    top: 28px;
    -webkit-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
}</style></head>
  <body data-gr-c-s-loaded="true" class="vsc-initialized" cz-shortcut-listen="true">
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"><div class="App"><div class="TopNavigationsBar__navBar__3rdGx"><div><ul class="NavigationBox__headingList__3Cw-y"><li class="NavigationBox__Brand__1n3_W">Shop Advisor</li><li class="NavigationBox__listItem__1wNPR">FAQ</li><li class="NavigationBox__listItem__1wNPR">Pricing</li><li class="NavigationBox__listItem__1wNPR">About Us</li><li class="NavigationBox__listItemBurger__34lVD"><div><i class="fas fa-bars"></i></div></li></ul></div><div class="BurgerMenuLinks__notexpanded__3l7KI"></div></div></div></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  <script type="text/javascript" src="./React App_files/bundle.js.download"></script>

</body></html>


反应应用程序
身体{
保证金：0；
填充：0；
字体系列：无衬线；
}
.App\u App\u 3Ge-C{
文本对齐：居中；
}
.App__App-logo__S1Lue{
-webkit动画：App_uuapp-logo-spin_uuu2zbnz无限20秒线性；
动画：App_uuapp-logo-spin_uuu2zbnz无限20秒线性；
高度：80px；
}
.App__App-header__1mzDF{
背景色：#222；
高度：150像素；
填充：20px；
颜色：白色；
}
.App\u App-title\u tAcLI{
字号：1.5em；
}
.App__App-intro__2BdAl{
字体大小：大号；
}
@-webkit关键帧App__App-logo-spin__2zbnz{
来自{webkit transform:rotate（0deg）；transform:rotate（0deg）；}
到{-webkit变换：旋转（360度）；变换：旋转（360度）；}
}
@关键帧App__App-logo-spin__2zbnz{
来自{webkit transform:rotate（0deg）；transform:rotate（0deg）；}
到{-webkit变换：旋转（360度）；变换：旋转（360度）；}
}
.TopNavigationsBar\uuu导航栏\uuuuu 3rdGx{
高度：28px；
背景色：#144269；
}.NavigationBox\uuu标题列表\uuuuu 3Cw-y{
左缘：20%；
垫顶：2件；
边际上限：0px；
}
.NavigationBox__列表项__1wNPR{
显示：内联块；
右侧填充：0.5雷姆；
左侧填充：0.5雷姆；
填料顶部：0.2rem；
字体大小：0.5rem；
字体大小：400；
颜色：白色；
光标：指针；
}
.NavigationBox\uuuu品牌\uuuuu 1n3\W{
字体大小：粗体；
字体大小：0.7rem；
游标：默认值；
显示：内联块；
右侧填充：0.5雷姆；
左侧填充：0.5雷姆；
填料顶部：0.2rem；
颜色：白色；
}
.NavigationBox__列表项__1wNPR:之后{
显示：块；
内容：“；
边框底部：纯色1px白色；
-webkit转换：scaleX（0）；
-ms变换：scaleX（0）；
变换：scaleX（0）；
-webkit转换：-webkit转换350ms易入易出；
转换：-webkit转换350ms轻松输入输出；
-o型转换：转换350ms缓进输出；
转换：转换350ms输入输出；
转换：转换350ms输入输出，-webkit转换350ms输入输出；
}
.NavigationBox__列表项__1wNPR:悬停：之后{
-webkit转换：scaleX（1）；
-ms变换：scaleX（1）；
变换：scaleX（1）；
}
.NavigationBox\uuu列表项Burger\uuuu 34lVD{
显示：内联块；
右侧填充：0.5雷姆；
左侧填充：0.5雷姆；
填料顶部：0.2rem；
字体大小：0.5rem；
字体大小：400；
颜色：白色；
光标：指针；
显示：无；
}
@媒体屏幕和屏幕（最大宽度：577px）{
.NavigationBox\uuu标题列表\uuuuu 3Cw-y{
左边缘：0%；
左侧填充：0px；
}
.NavigationBox__列表项__1wNPR{
显示：无；
}
.NavigationBox\uuu列表项Burger\uuuu 34lVD{
显示：内联块；
}
}.BurgerMenuLinks\uuuuuuuuu3lwg1{
高度：30px；
背景色：#144269；
z指数：1000；
位置：固定；
宽度：100%；
顶部：28px；
-webkit转换：1s；
-o-转变：1s；
过渡：1s；
}
.BurgerMenuLinks_uunotexpanded_uu3l7ki{
高度：0px；
背景色：#144269；
z指数：1000；
位置：固定；
宽度：100%；
顶部：28px；
-webkit转换：1s；
-o-转变：1s；
过渡：1s；
}
您需要启用JavaScript才能运行此应用程序。
购物顾问

有人知道如何解决这个问题吗

我感谢你的帮助

你的HTML代码在哪里？刚刚添加了应用CSS样式的HTML代码。谢谢，但我认为如果我们有最终的HTML输出，而不仅仅是未处理的JSX HTML，调试这个问题会更有帮助。还添加了处理后的HTML输出（尽管格式不理想）检查元素并检查是否应用了css。如果应用并覆盖了它，只需添加

！css的重要信息

<!DOCTYPE html>
<!-- saved from url=(0022)http://localhost:3000/ -->
<html lang="en" class="gr__localhost"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="”viewport”" content="”width=device-width," initial-scale="1″">
    <meta name="theme-color" content="#000000">
    <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
    -->


    <link rel="stylesheet" href="./React App_files/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
    <link href="./React App_files/css" rel="stylesheet">
    <link rel="manifest" href="http://localhost:3000/manifest.json">
    <link rel="shortcut icon" href="http://localhost:3000/favicon.ico">
    <!--
      Notice the use of  in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  <style type="text/css">body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}
</style><style type="text/css">.App__App__3Ge-C {
  text-align: center;
}

.App__App-logo__S1Lue {
  -webkit-animation: App__App-logo-spin__2zbnz infinite 20s linear;
          animation: App__App-logo-spin__2zbnz infinite 20s linear;
  height: 80px;
}

.App__App-header__1mzDF {
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
}

.App__App-title__tAcLI {
  font-size: 1.5em;
}

.App__App-intro__2BdAl {
  font-size: large;
}

@-webkit-keyframes App__App-logo-spin__2zbnz {
  from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@keyframes App__App-logo-spin__2zbnz {
  from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
</style><style type="text/css">.TopNavigationsBar__navBar__3rdGx {
    height:28px;
    background-color: #144269;
}</style><style type="text/css">.NavigationBox__headingList__3Cw-y {
    margin-left: 20%;
    padding-top: 2px;
    margin-top: 0px;
}

.NavigationBox__listItem__1wNPR {
    display: inline-block;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    padding-top: 0.2rem;
    font-size: 0.5rem;
    font-weight: 400;
    color: white;
    cursor: pointer;
}

.NavigationBox__Brand__1n3_W {
    font-weight: bold;
    font-size: 0.7rem;
    cursor: default;
    display: inline-block;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    padding-top: 0.2rem;
    color: white;
}

.NavigationBox__listItem__1wNPR:after {
    display: block;
    content: "";
    border-bottom: solid 1px white;
    -webkit-transform: scaleX(0);
        -ms-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transition: -webkit-transform 350ms ease-in-out;
    transition: -webkit-transform 350ms ease-in-out;
    -o-transition: transform 350ms ease-in-out;
    transition: transform 350ms ease-in-out;
    transition: transform 350ms ease-in-out, -webkit-transform 350ms ease-in-out;
}

.NavigationBox__listItem__1wNPR:hover:after {
    -webkit-transform: scaleX(1);
        -ms-transform: scaleX(1);
            transform: scaleX(1);
}

.NavigationBox__listItemBurger__34lVD {
    display: inline-block;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    padding-top: 0.2rem;
    font-size: 0.5rem;
    font-weight: 400;
    color: white;
    cursor: pointer;
    display: none;
}

@media screen and (max-width: 577px) {
    .NavigationBox__headingList__3Cw-y {
        margin-left: 0%;
        padding-left: 0px;
    }
    .NavigationBox__listItem__1wNPR {
        display: none;
    }
    .NavigationBox__listItemBurger__34lVD {
        display: inline-block;
    }
}</style><style type="text/css"></style><style type="text/css">.BurgerMenuLinks__expanded__3lWG1 {
    height: 30px;
    background-color: #144269;
    z-index: 1000;
    position: fixed;
    width: 100%;
    top: 28px;
    -webkit-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
}

.BurgerMenuLinks__notexpanded__3l7KI {
    height: 0px;
    background-color: #144269;
    z-index: 1000;
    position: fixed;
    width: 100%;
    top: 28px;
    -webkit-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
}</style></head>
  <body data-gr-c-s-loaded="true" class="vsc-initialized" cz-shortcut-listen="true">
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"><div class="App"><div class="TopNavigationsBar__navBar__3rdGx"><div><ul class="NavigationBox__headingList__3Cw-y"><li class="NavigationBox__Brand__1n3_W">Shop Advisor</li><li class="NavigationBox__listItem__1wNPR">FAQ</li><li class="NavigationBox__listItem__1wNPR">Pricing</li><li class="NavigationBox__listItem__1wNPR">About Us</li><li class="NavigationBox__listItemBurger__34lVD"><div><i class="fas fa-bars"></i></div></li></ul></div><div class="BurgerMenuLinks__notexpanded__3l7KI"></div></div></div></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  <script type="text/javascript" src="./React App_files/bundle.js.download"></script>

</body></html>