媒体查询在样式组件中不起作用

Question

我已经尝试了很多，来应用媒体查询，但是无论我在做什么，都没有响应，即使在 chrome 上检查它，我也看不到那里应用的任何媒体查询...

有人可以解释一下原因是什么吗。我还尝试添加一个单独的 css 文件，然后应用媒体查询，但这也不起作用。

我基本上需要隐藏移动视图中的navLink

import React from "react";
import Logo from "../../assets/Logo/LogoWhite.svg";

function Header() {
  return (
    <div style={styles.container}>
      <div class="logo" style={styles.logo}>
        <img src={Logo} style={styles.logoImage} alt="LogoImage" />
        <h1 style={styles.logoHeader}>OKidzLabs</h1>
      </div>
      <div class="navContent" style={styles.navContent}>
        <ul style={styles.navList}>
          <li>
            <a style={styles.navLinks} href="#">
              Home
            </a>
          </li>
          <li>
            <a style={styles.navLinks} href="#">
              Gallery
            </a>
          </li>
          <li>
            <a style={styles.navLinks} href="#">
              Meet the Creators
            </a>
          </li>
          <li>
            <a style={styles.navLinks} href="#">
              Activities for Kids
            </a>
          </li>
        </ul>
      </div>
      <div class="social" style={styles.social}></div>
    </div>
  );
}

const styles = {
  container: {
    display: "flex",
    height: "60px",
    // backgroundColor:"red",
    justifyContent: "space-evenly",
    borderBottom: "1px solid tomato",
    boxShadow: "0px 0px 4px 4px #f5aa42",
  },
  logo: {
    // backgroundColor:"yellow",
    display: "flex",
    color: "tomato",
    alignItems: "center",
    fontFamily: "cursive",
    width: "250px",
    marginLeft: "10px",
  },
  logoImage: {
    height: "58px",
    color: "orange",
    fill: "orange",
  },
  logoHeader: {
    fontSize: "26px",
    fontFamily: "cursive",
  },
  navContent: {
    // backgroundColor:"green",
    width: "60%",
  },
  navList: {
    display: "flex",
    listStyle: "none",
    justifyContent: "space-evenly",
    marginTop: "16px",
  },
  navLinks: {
    display: "block",
    textDecoration: "none",
    color: "orange",
    fontSize: "18px",
    fontWeight: "500",
  },
  social: {
    backgroundColor: "cyan",
    width: "20%",
  },

  // Media Queries
  "@media(minWidth:991px)": {
    navList: {
      display: "none",
      color: "#fff",
    },
  },
};

export default Header;

Answer 1

由于 中使用的语法，它无法识别媒体断点@media(minWidth:991px)。尝试使用连字符，例如@media(min-width:991px)