Can I use media queries in "globalStyle"?

[leo-petrucci]

For reasons I won't go into here I'm unable to assign a vanilla-extract class to the div I want to style. I'm also unable to wrap it into another div and style that one, as that seems to break some internal animation logic.

I want to target <div data-radix-popper-content-wrapper />, but only apply styles to it when a certain media query is satisfied. How can I do that?

Current code looks like this:

globalStyle(`div[data-radix-popper-content-wrapper]`, {
  transform: "translate3d(0px, 0, 0px)!important",
  width: "100%",
  bottom: 0,
  top: "auto!important",
  maxWidth: 768,
});

I can't for the life of me find any documentation on how to use a media query within globalStyle.

Help?

[tomahl]

Hi @leo-petrucci,

Just follow the docs here and replace style() with globalStyle().

globalStyle('div[data-radix-popper-content-wrapper]', {
	transform: 'translate3d(0px, 0, 0px)!important',
	width: '100%',
	bottom: 0,
	top: 'auto!important',
	maxWidth: 768,
	
	'@media': {
		'screen and (min-width: 768px)': {
			// responsive styles
		},
	},
});

[leo-petrucci]

Not sure why I didn't realise @media worked. sorry, been a long day!