无法覆盖 CSS 混入

Question

我正在开发使用阿拉伯语的 RTL 应用程序，所以我想将我的应用程序字体更改为与 Robot 字体不同的字体，更具体地说：Noto Kufi Arabic。

查看 paper-styles/typography.html 文件，我希望能够通过覆盖 my-element 中的 --paper-font-common-base mixin 来更改使用的字体。

例如

<style>

:host { }

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

但是我永远无法让它以这种方式工作！

我唯一能做的就是评论 paper-styles/typography.html 中的以下几行：

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

并以 my-element 样式保留该混合。

预期

实际

Answer 1

在您的示例中，您忘记了混合名称后的冒号，这应该会给您的代码带来错误 editor/IDE，至少在 Visual Studio 代码中：

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