В моем 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;
}
}
В моих инструментах разработчика я вижу, что мобильные стили переопределяются:
Я думал, что если я импортирую мобильную таблицу стилей в общую таблицу стилей, мобильная версия будет иметь приоритет, я использовал это в других проектах, и, похоже, это работает нормально. Что я неправильно понимаю?
Стили медиа-запросов и обычные стили имеют один и тот же специфичность, что означает, что 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
переопределит все ваши проверки селектора, и это вызовет больше проблем, если к одному и тому же селектору будет применено много стилей.
@DylanLittle, что касается вашего случая, импорт вашего стиля может быть нарушен во время компиляции, и мы не будем уверены, что они будут иметь те же позиции стиля, что и ваш импорт. Раньше я сталкивался с похожей ошибкой, мои стили хорошо работали на моем локальном хосте, но после урезания/сжатия стилей позиции стилей менялись без моего уведомления, и мне приходилось часами заниматься отладкой. В большинстве случаев мы должны полагаться на селекторы, которые помогут вам улучшить видимость кода.
Это действительно интересно. Звучит хорошо, тогда я, вероятно, просто буду полагаться на селекторы. Не могли бы вы сделать мне одолжение и бросить этот комментарий в ответ, и я отмечу его. не стесняйтесь удалять послесловие комментария. Или нет, как бы вы ни хотели это сделать.
@DylanLittle Я также добавил нашу дискуссионную часть в свой ответ: D. Кстати, я не уверен на 100% в ваших настройках, но вы можете увидеть приложения ваших стилей в HTML. У них могут быть некоторые подсказки, которые помогут вам сузить круг истинной проблемы.
Итак, как это работает с тем, как я импортировал свои файлы? Размещая импорт мобильных таблиц стилей под общим импортом таблиц стилей, разве я не делаю то, что вы объяснили? или я ошибаюсь?