2

我的问题

我设置了我的自定义主题，它工作正常。

但是我在橙色（重音）按钮上得到黑色文本颜色，但我想要白色。

我的解决方案

在@material/theme/_variables.scss我们有这样的代码：

$mdc-theme-primary: #3f51b5 !default; /* Indigo 500 */
$mdc-theme-accent: #ff4081 !default; /* Pink A200 */
$mdc-theme-background: #fff !default; /* White */

/* Which set of text colors to use for each main theme color (light or dark) */
$mdc-theme-primary-tone: mdc-theme-light-or-dark($mdc-theme-primary);
$mdc-theme-accent-tone: mdc-theme-light-or-dark($mdc-theme-accent);
$mdc-theme-background-tone: mdc-theme-light-or-dark($mdc-theme-background);

从上面的代码中，我们可以看到前三个参数有!default这意味着使用它作为默认值，如果它们已经被声明为不覆盖。

出于这个原因，我们可以指定自定义颜色。

但是对于像$mdc-theme-accent-tone我们这样的属性，我们被迫使用计算值。如果我将上面的代码（ MDC 的源代码）更改为

$mdc-theme-accent-tone: mdc-theme-light-or-dark($mdc-theme-accent) !default;

在我的风格中

$mdc-theme-accent-tone : "light"

它工作正常。但显然我不能更改源代码。如何实现这一点。

4

1 回答 1

2

我意识到这是根据材料设计规范。因此，期望一项条款被推翻是错误的。但是出于所有实际原因，要覆盖它们，请执行以下操作：

@import "@material/theme/mdc-theme";

:root {
    --mdc-theme-text-primary-on-accent: white;
}

记住要在导入 mdc-theme 之后编写覆盖样式

于 2017-07-04T08:22:24.443 回答