Join our next Developer Virtual Meetup – Live Q&A, Project Showcase, Swag raffle, and more 🔥

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 . 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. 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?