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 ?
You cannot use media queries in js. The best solution is this:
if (window.matchMedia("(min-width: 600px)").matches) {
}