CSS variables in component style block

I’m trying to modify CSS variable to change font-family inside a component style block, but this doesn’t work as I expect and is not applied to my content. (don’t mind the text-color as that should be block-text-color, but question is about font family)


It looks like the scoped CSS is generated correctly, so maybe I’m missing something about CSS variables :slight_smile:


If I apply the variable to :root the font-family is changed. So I guess it has something to do with my variable usage.

So this works as I expect:

This is how CSS variables work in general. Originally this rule defined on BODY:

body {
  color: var(--f7-text-color);

So to overwrite it you need to define CSS var on body or “higher” (:root).

CSS vars is not the case here, just use required styles directly