Search code examples
polymerweb-componentpolymer-2.xcss-mixin

Cannot Override CSS Mixin

I'm developing RTL application uses the Arabic language so I want to change my application font to different font than Robot font, more specifically: Noto Kufi Arabic.

Looking to paper-styles/typography.html file, I expected to be able to change the used font by overriding --paper-font-common-base mixin inside my-element.

e.g.

<style>

:host { }

paper-tabs {
  --paper-font-common-base {
    font-family: 'Noto Kufi Arabic', sans-serif;
  };
}
</style>

However I can never get it to work this way!

The only which I was able to do is by commenting the below lines in paper-styles/typography.html:

  --paper-font-common-base: {
    font-family: 'Roboto', 'Noto', sans-serif;
    -webkit-font-smoothing: antialiased;
  };

and keep that mixin in my-element styles.

Expected

expected outcome

Actual

actual outcome

Solution

  • In your example you have forgotten the colons after the mixin name, that should give you an error in your code editor/IDE, at least in Visual Studio Code:

    paper-tabs {
   --paper-font-common-base: {
       font-family: 'Noto Kufi Arabic', sans-serif;
   };
}