Medienabfrage funktioniert nicht in React

Question

Ich versuche, ein Bild zu verbergen, wenn der Bildschirm/das Bildfenster eine Breite von über 900px hat. Aus irgendeinem Grund funktioniert dies nicht in einem sehr einfachen Beispiel.

Ich habe eine sehr einfache Komponente für meine Fußzeile - es ist funktional, kein Zustand oder Methoden, und es ist nur unter der Hauptkomponente verschachtelt.

Ich bin die Stile für die Fußzeile in der Komponente enthalten, so dass es vollständig lokalisiert ist. Aus irgendeinem Grund scheint @media in diesem einfachsten Beispiel nicht zu funktionieren.

Wenn ich Chrome Devtools öffne, sehe ich die Medienabfrage an meinem Element am entsprechenden Haltepunkt, aber der Stil wird nicht angewendet, obwohl meine Bildschirmbreite weit über 900 px liegt. Die in meiner Medienabfrage angegebenen Stile sind durchgestrichen. Also mein Element wählt, um die ursprünglichen Stile beizubehalten und die Medienabfrage aus irgendeinem Grund zu blockieren. Wenn ich in der Medienabfrage einen Stil hinzufüge, der in der ursprünglichen Klasse noch nicht vorhanden ist, wird er angewendet.

Ich habe folgendes in den Kopf in index.html enthalten

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

Ich verwende auch Router reagieren (wenn das einen Unterschied macht).

Reagiert das Verhindern, dass Medienanfragen funktionieren? Mache ich irgendwo einen extrem dummen Fehler?

Hier ist meine Komponente - das div mit classname 'logo' ist, was ich versuche zu wechseln:

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; 

Hier ist der relevante CSS: stark

/* 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; 
} 

Jede Hilfe ist willkommen !

aktualisiert

Wenn die reguläre Klassendefinition und Mediendefinition die gleiche Klassenhierarchie haben, werden die Medien Stile immer außer Kraft gesetzt. Wenn jedoch in der regulären Definition weniger Klassenhierarchien definiert sind, funktioniert dies.

Ich habe bestätigt, durch Entfernen aller übergeordneten 'Anzeige' Stile, dass keine andere Klasse sofort den Stil zu überschreiben verursacht.

Was überschreibt die Stile? Warum geschieht dies, wenn ich Best Practices befolge und eine gute Hierarchie für CSS-Klassen definiert habe?

Answer 1

Es ist nicht das Problem mit dem Css-Code reagieren. Wenn Sie zwei Regeln anwenden, die mit den gleichen Elementen kollidieren, wählt sie die letzte, die deklariert wurde. Setzen Sie die @ media-Abfragen an das Ende der CSS-Seite. d. h.

.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; 
    } 
}