🔮 Sanity Create is here. Writing is reinvented. Try now, no developer setup

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

7 replies
Last updated: Jul 2, 2021
Cant override the css-variable
when trying to overide css-variables https://www.sanity.io/docs/styling#d7f9b5cc2adb . Other overrides seems to work. Anybody has some pointers?
Jul 1, 2021, 8:43 AM
Managed to target what I wanted with this funky selector, but it doesn't seem optimal 😅

:global([class^="documentPanel_documentViewerContainer"]) {
    background-color: #efefef;
Jul 1, 2021, 8:52 AM
I don’t think
is a valid CSS pseudo class. https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes Did you mean
Jul 1, 2021, 9:28 AM
Good catch, the
-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:

[class^="documentPanel_documentViewerContainer"] {
    background-color: #efefef;
But still looking for a better way to solve this than using this weird custom selector..
Jul 1, 2021, 10:32 AM
What’s weird about it?
Jul 1, 2021, 12:07 PM
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,
, but it seems like there is a bug with this particular css-variable, can't override it, it just gets set to
🤷 I can override other variables, but not this one.
Jul 1, 2021, 1:21 PM
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.
Jul 1, 2021, 7:01 PM
Ok, thanks 👍
Jul 2, 2021, 6:22 AM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?