Passing variants to globalCss

[joepio]

I was working on a menu button, and wanted to disable body scrolling as long as the menu was open. To do this, I wanted to set overflow: hidden on the body element. This state would have been controlled by some child component of body, which means I can't use regular variants.

I first tried this:

  let bodyStyles = {
    body: {
      overflow: 'auto',
    },
  };

  if (show) {
    bodyStyles = {
      body: {
        overflow: 'hidden',
      },
    };
  }

  globalCss(bodyStyles)();

This did not work, as calling globalCss simply appended the styles, and CSS precedence does not care about how old a style is.

So I thought, maybe I can use variants in globalCss?

  globalCss({
    variants: {
      show: {
        true: {
          body: {
            overflow: 'hidden',
            maxHeight: '100vh',
          },
        },
      },
    },
  })({ show: true });

But this does not work, because the globalCss function does not accept any arguments. Is there a way to pass a variant to globalCss?

[bwyx]

there's no such variant in globalCss, this function only accepts the global styles

to achieve your goal
use the old way, document.body.classList.toggle('overflow-hidden'), then in globalCss() add that class:

globalCss({
  '.overflow-hidden': {
    overflow: 'hidden'
  }
  
  // or
  'body.overflow-hidden': {
    overflow: 'hidden'
  }
})

therefore you have more flexibility to put the logic in your child components