为什么我的媒体查询没有优先于我的内联JSX样式？

Question

首先，我说我一直在寻找这种解决方案，并且完全陷入困境。我遵循了在其他css规则之后从单独文件中导入媒体查询的建议，我使用祖先定位查询中的跨度以尝试覆盖内联样式，我已经尝试了几乎所有其他方法考虑到。

[当前，当页面宽度在0像素到600像素之间时，我要呈现一个具有嵌套跨度的跨度。我正在使用react，所以我必须遵循他们的内联样式指导。本质上，我创建了一个带有显示的对象：没有样式规则作为键值对。然后，我将其传递给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 documentation上有所显示。

您可以简单地删除内联样式并使用两个媒体查询或移动优先方法来显示/隐藏<style>。

这里是移动优先方法：

.blah

这样您就完全摆脱了内联CSS，并消除了一些优先级问题。