Can't Override the CSS-Variable --Card-Bg-Color When Overriding CSS-Variables?

Cant override the css-variable

--card-bg-color

when trying to overide css-variables https://www.sanity.io/docs/styling#d7f9b5cc2adb . Other overrides seems to work. Anybody has some pointers?

Managed to target what I wanted with this funky selector, but it doesn't seem optimal 😅

I don’t think

:global

is a valid CSS pseudo class. https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes Did you mean

:root

?

Good catch, the

:global

-part of the selector was not necessary here 🙌 Don't really know this selector, but it's something Sanity uses in their docs , but apparently it was unnecessary here 🙂
So this is also working:

But still looking for a better way to solve this than using this weird custom selector..
🤔

What’s weird about it?

It feels a bit fragile to make a selector like this, and Sanity encourages you to override css-variables for this kind of styling . There is a css-variable that should work for this,

--card-bg-color

, but it seems like there is a bug with this particular css-variable, can't override it, it just gets set to

#fff

🤷 I can override other variables, but not this one.

Hey Daniel! I believe there are only certain variables you can override in the Studio. If it’s not listed here , it can’t be overridden.

Ok, thanks 👍