В моем приложении для реагирования я импортирую мобильные стили, которые переопределяются общей таблицей стилей.

В моем App.js у меня есть следующий импорт:

import React from 'react'
import './styles/App.css';
import './styles/mobile.css';

в styles/App.css у меня есть:

h1 {
  font-size: 4.5rem;
  font-weight: 700;
  margin: 20px 10px 0px 10px;
  text-align: center;
  color: white;
}

в styles/mobile.css у меня есть:

@media screen and (max-width: 500px) {
  h1 {
    font-size: 2rem;
  }
}

В моих инструментах разработчика я вижу, что мобильные стили переопределяются: enter image description here

Я думал, что если я импортирую мобильную таблицу стилей в общую таблицу стилей, мобильная версия будет иметь приоритет, я использовал это в других проектах, и, похоже, это работает нормально. Что я неправильно понимаю?

Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
1
0
24
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Стили медиа-запросов и обычные стили имеют один и тот же специфичность, что означает, что h1 внутренние и внешние медиа-запросы являются похожими селекторами.

В этом случае он будет проверять объявление стиля сверху вниз (нижний переопределит верхний). Вы можете проверить приведенный ниже пример

@media screen and (max-width: 2000px) {
  h1 {
    color: red;
  }
}

h1 {
  color: blue; /* Get applied */
}
<h1>Testing</h1>

Чтобы исправить это, вы можете изменить объявление позиции стилей.

h1 {
  color: blue;
}

@media screen and (max-width: 2000px) {
  h1 {
    color: red; /* Get applied */
  }
}
<h1>Testing</h1>

Если вы не можете управлять объявлением стилей из-за компиляции кода, вы можете добавить еще один селектор, чтобы увеличить значение специфичности.

@media screen and (max-width: 2000px) {
  body h1 { /* Added `body` here */
    color: red; /* Get applied */
  }
}

h1 {
  color: blue;
}
<h1>Testing</h1>

Что касается вашего случая

import React from 'react'
import './styles/App.css';
import './styles/mobile.css';

Импорт стилей может быть нарушен во время компиляции, и мы не можем быть уверены, что они будут иметь те же позиции стилей, что и ваши импорты. Раньше я сталкивался с подобной ошибкой, мои стили хорошо работали на моем локальном хосте, но после удаления/сжатия стилей позиции стилей менялись без моего уведомления.

Я бы посоветовал в большинстве случаев полагаться на селекторы, которые помогут вам улучшить видимость кода и избежать применения неожиданных стилей.


Вы также можете использовать !important для получения того же эффекта, но я бы не рекомендовал это делать. !important переопределит все ваши проверки селектора, и это вызовет больше проблем, если к одному и тому же селектору будет применено много стилей.

Итак, как это работает с тем, как я импортировал свои файлы? Размещая импорт мобильных таблиц стилей под общим импортом таблиц стилей, разве я не делаю то, что вы объяснили? или я ошибаюсь?

Dylan L. 09.04.2022 21:01

@DylanLittle, что касается вашего случая, импорт вашего стиля может быть нарушен во время компиляции, и мы не будем уверены, что они будут иметь те же позиции стиля, что и ваш импорт. Раньше я сталкивался с похожей ошибкой, мои стили хорошо работали на моем локальном хосте, но после урезания/сжатия стилей позиции стилей менялись без моего уведомления, и мне приходилось часами заниматься отладкой. В большинстве случаев мы должны полагаться на селекторы, которые помогут вам улучшить видимость кода.

Nick Vu 09.04.2022 21:08

Это действительно интересно. Звучит хорошо, тогда я, вероятно, просто буду полагаться на селекторы. Не могли бы вы сделать мне одолжение и бросить этот комментарий в ответ, и я отмечу его. не стесняйтесь удалять послесловие комментария. Или нет, как бы вы ни хотели это сделать.

Dylan L. 09.04.2022 21:14

@DylanLittle Я также добавил нашу дискуссионную часть в свой ответ: D. Кстати, я не уверен на 100% в ваших настройках, но вы можете увидеть приложения ваших стилей в HTML. У них могут быть некоторые подсказки, которые помогут вам сузить круг истинной проблемы.

Nick Vu 09.04.2022 21:19

Другие вопросы по теме