css - 媒体查询在 React 中不起作用

Question

当屏幕/视口(viewport)的宽度超过 900 像素时，我试图隐藏图像。出于某种原因，这在一个非常基本的示例中不起作用。

我的页脚有一个非常简单的组件 -- 它是功能性的，没有状态或方法，而且它只嵌套在主组件下。

我在组件中包含了页脚的样式，因此它是完全本地化的。出于某种原因，在这个最基本的示例中，@media 似乎不起作用。

当我打开 Chrome devtools 时，我确实看到媒体查询在适当的断点处附加到我的元素，但是即使我的屏幕宽度超过 900 像素，样式也没有被应用。我的媒体查询中声明的样式被划掉了。所以我的元素是选择保持原始样式并出于某种原因阻止媒体查询。如果我在媒体查询中添加原始类中不存在的样式，则会应用它。

我在 index.html 的 head 中包含了以下内容

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

我也在使用 React Router(如果这有什么不同的话)。

React 是否阻止了媒体查询的工作？我是不是在某个地方犯了一个极其愚蠢的错误？

这是我的组件——带有 className 'logo' 的 div 是我要切换的内容:

import React from 'react';
import { Link } from 'react-router-dom';
import './footer.component.css';

function Footer(props) {
  return (
    <div className="footer">
      <span className="column">
        <div className="social-column-container">
          <img className="logo" src="./images/logo.jpg" alt="kimbyarting logo" title="kimbyarting logo" />
          <div className="social-icon-container">
            <div className="social-icon"></div>
            <div className="social-icon"></div>
            <div className="social-icon"></div>
            <div className="social-icon"></div>
            <div className="social-icon"></div>
          </div>
        </div>
      </span>
    </div>
  );
}

export default Footer;

这是相关的 CSS:

/* Small desktop */
@media only screen and (min-width: 900px) {
  .footer
  .column
  .social-column-container
  .logo {
    display: none;
  }
}

/* Mobile */
.footer
.column
.social-column-container
.logo {
  width: 100px;
  height: auto;

  display: inline-block;
  margin-left: 50px;
}

非常感谢任何帮助!

更新

如果常规类定义和媒体定义具有相同的类层次结构，媒体样式总是被覆盖。但是，如果常规定义中定义的类层次结构更少，则此方法有效。

我已经确认，通过删除所有父“显示”样式，似乎没有其他类会立即导致样式被覆盖。

什么是覆盖样式？当我遵循最佳实践并为 CSS 类定义了良好的层次结构时，为什么会发生这种情况？

Answer 1

这不是与 css 代码 react 的问题。如果您将两个规则应用于相同的元素，它将选择最后一个声明的规则。所以将 @media 查询放在 css 页面的末尾。即

.footer
.column
.social-column-container
.logo {
     width: 100px;
     height: auto;
     display: inline-block;
     margin-left: 50px;
 }
@media only screen and (min-width: 900px) {
   .footer
   .column
   .social-column-container
   .logo {
      display: none;
   }
 }