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

Question

I have been trying a lot, to apply the media queries, but whatever I'm doing there's no response, even on inspecting it on chrome, I can't see any media queries applied there...

Can somebody explain what's the reason. I have also tried adding a separate css file and then apply the media queries, but that also didn't worked.

I basically need to hide the navLink in mobile View

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

I think it is because of the syntax used in @media(minWidth:991px) . Try it with a hyphen like @media(min-width:991px)