CODEWITHSUNDEEP
cssreactjsjsx
Jacob Coons
Jacob Coons

Reputation: 3

Why isn't my media query taking priority over my inline JSX styling?

First, let me say I've looked all over for this solution and am completely stuck. I've followed suggestions of importing media queries from a separate file after my other css rules, I've used an ancestor to target the span in the query to try and override the inline styling, I've tried just about everything else I can think of.

Currently, I have a span with nested spans that I want to render when the page width is between 0px and 600px. I am using react so I had to follow their guidelines for inline styling. Essentially I created an object with the display: none styling rules as the key-value pair. I then passed that to the JSX for the span. So essentially, it looks like this.

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>

So now I have in my media query:

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

Please, I really need some help here. I'm quite literally pulling my hair out over this and I have 0 tools in my toolbelt to deal with this kind of bug as I've never run into something quite like this yet.

Upvotes: 0

Views: 411

Answers (1)

Barthy
Barthy

Reputation: 3231

Inline styles always have priority over internal or embedded CSS, and over external CSS. This is shown to some degree on the <style> MDN documentation.

You could simply remove the inline styles and use two media queries or the mobile-first approach to show/hide the .blah.

Here is the mobile first approach: 

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

This way you completely get rid of inline CSS and with that, you eliminate some of the priority issues.

Upvotes: 1

Related Questions