CSS variables do not work in media queries of other React components

Question

My app.css contain this css variable which is used in my css header component and it works well.

:root {
  --fs-subtitle-spartan: 1rem;
}

The class that uses it in the header component :

.menu__items {
 font-size: var(--fs-subtitle-spartan);
}

But when I want to modify the variable in media queries of my header it doesn’t work.

@media (width < 48em) {
  :root {
    --fs-subtitle-spartan: 1.5rem;
  }

How can I change css variables in media queries of other components ?

It only works if I change the css variable in the media queries of my app.css.

abubakarutar · Accepted Answer · 2022-05-17 00:20:43Z

1

Try @media (screen and max-width = 768px) instead of @media (width < 48em). This is because:

your media query's syntax wasn't correct
you should always use px values in media queries, never em, because px values are absolute.

answered May 17, 2022 at 0:20

abubakarutar

1419 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alain-sys Over a year ago

I use the level 4 specification of media queries as follows: developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/… The syntax works well in my app.css. I tried the basic syntax but it doesn’t work in the component header either. I use the em value for consistency in all browsers because safari does something different if you use rem or pixels compared to other browsers.

Collectives™ on Stack Overflow

CSS variables do not work in media queries of other React components

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related