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
--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?
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
:global
is a valid CSS pseudo class. https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes Did you mean
:root
?
Jul 1, 2021, 9:28 AM
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:

[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,
--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.
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.io – build remarkable experiences at scale

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

Categorized in