媒体查询不适用于样式化组件

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)

这样的连字符

媒体查询不适用于样式化组件

Media Query not working in styled components

html

javascript

css

reactjs

styled-components