Почему мой медиа-запрос не имеет приоритета над моим встроенным стилем JSX?

Question

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

В настоящее время у меня есть диапазон с вложенными диапазонами, который я хочу визуализировать, когда ширина страницы составляет от 0 до 600 пикселей. Я использую реагирование, поэтому я должен был следовать их рекомендациям по встроенному стайлингу. По сути, я создал объект с дисплеем: ни один из стилевых правил не является парой ключ-значение. Я тогда передал это JSX для промежутка. По сути, это выглядит так.

const hidden = {
   display: 'none'
}
...
<span className="blah" style={hidden}>
   <span>blah</span>
   <span>: </span>
   {deleteButton2} //this is a separate span generated conditionally, doesn't relate to this.
</span>

Итак, теперь у меня в медиа-запросе:

@media screen and (min-width: 0px) and (max-width: 600px) {
   //other rules that work fine
   ...
   .blah-ancestor > .blah {
      display: inline //I've tried inline, inline-block, and block, none of which are working.
   }
}

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

Answer 1

Встроенные стили всегда имеют приоритет над внутренним или встроенным CSS и над внешним CSS. В некоторой степени это показано в документации <style> MDN .

. Вы можете просто удалить встроенные стили и использовать два медиазапроса или метод «сначала на мобильном», чтобы показать / скрыть .blah.

Вот первый подход для мобильных устройств:

// Smallest screens 0px - 600px, no media query
.blah-ancestor > .blah {
   display: inline;
}

// Small screens above 600px
@media screen and (min-width: 601px) {
   .blah-ancestor > .blah {
      display: none;
   }
}

Таким образом, вы полностью избавляетесь от встроенного CSS и тем самым устраняете некоторые приоритетные проблемы.