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

【问题标题】：Media Query not working in styled components媒体查询在样式化组件中不起作用
【发布时间】：2022-01-04 08:40:49
【问题描述】：

我一直在尝试应用媒体查询，但无论我在做什么都没有响应，即使在 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;

【问题讨论】：

你不能这样。您正在检索某个对象。尝试这样做if (this.state.viewport.width > 900) { styles.navList = { display: "none", color: "#fff", }; } else { styles.navList = { display: "none", color: "#fff", }; }

标签： javascript html css reactjs styled-components

【解决方案1】：

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

【讨论】：