0

I want to pass css variable into my media query but I don't know how.

It's a Next.Js project, and I use theme-ui's sx property to assign style.

const styles = {

    headerLinkContainer: {
        width: '500px',
        justifyContent: 'space-evenly',
        alignItems: 'center',
        "@media screen and (min-width: var(--medium-devices))": {
            display: 'none',
        }
    },
}

I tried "@media screen and (min-width: 'var(--medium-devices)')" but it doesn't work.

Can you help me guys ?

juliomalves
  • 42,130
  • 20
  • 150
  • 146
RDS
  • 13
  • 2

1 Answers1

0

You cannot use media queries in js. The best solution is this:

if (window.matchMedia("(min-width: 600px)").matches) {
}
MrBlender
  • 197
  • 14
  • Thank you ! Also I found an answer here if someone needs it https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries – RDS Dec 03 '21 at 08:56