How can I pass css variable to media queries in Javascript Object? [duplicate]

Question

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 ?

EmielV · Accepted Answer · 2021-12-02 22:11:57Z

0

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

if (window.matchMedia("(min-width: 600px)").matches) {
}

answered Dec 2, 2021 at 22:11

EmielV

2072 silver badges16 bronze badges

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

1 Comment

RDS Over a year ago

Thank you ! Also I found an answer here if someone needs it stackoverflow.com/questions/40722882/…

Collectives™ on Stack Overflow

How can I pass css variable to media queries in Javascript Object? [duplicate]

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related