未定义 MDC-Web CSS 主题颜色

Question

在本地运行时，我的前端会检查按钮元素，即使定义也没有定义颜色 --mdc-theme-primary 。

检查元素：

索引.html：

<button class="mdc-tab mdc-tab--active" aria-selected="true" tabindex="0">
<span class="mdc-tab__content">
<span class="mdc-tab__text-label">Home</span>
</span>
</button>

Firefox 检查元素结果，--mdc-theme-primary未使用回退值定义：

.mdc-tab--active .mdc-tab__text-label {
color: #e3f2fd;//this line is disabled in console is dashed
color: var(--mdc-theme-primary, #e3f2fd);
}

使用主题指南！我按如下方式设置了我的文件：

_themecolor.scss

$mdc-theme-primary: #e3f2fd;
$mdc-theme-on-primary: #442C2E;
$mdc-theme-secondary: #0d48a1;
$mdc-theme-on-secondary: rgb(235, 15, 33);
$mdc-theme-surface: #000000;
$mdc-theme-on-surface: #442C2E;
$mdc-theme-background: #000000;
$mdc-theme-on-background: #442C2E;

_variables.scss(用于完成，不需要)

.topAppBar-margin-fix {
top: 0;
left: 0;
}

app.scss

@import "./_themecolor";
@import "./_variables";

@import "@material/top-app-bar/mdc-top-app-bar";
@import "@material/typography/mdc-typography";
@import "@material/button/mdc-button";
@import "@material/tab-bar/mdc-tab-bar";
@import "@material/tab-bar/mixins";
@import "@material/tab-scroller/mdc-tab-scroller";
@import "@material/tab-indicator/mdc-tab-indicator";
@import "@material/tab-indicator/mixins";
@import "@material/tab/mdc-tab";
@import "@material/tab/mixins";
.mdc-tab__text-label{
//@include mdc-tab-active-text-label-color(on-primary);
//--mdc-theme-primary: red;
//--mdc-theme-primary: $mdc-theme-on-secondary;
}
body {
color: blue;
}

应用.js

import {MDCTabBar} from '@material/tab-bar';
const tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));
import {MDCTabScroller} from '@material/tab-scroller';
const tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));
import {MDCTab} from '@material/tab';
const tab = new MDCTab(document.querySelector('.mdc-tab'));

在滚动条内提供此站点，按钮中主页标签的颜色是后备颜色，而不是主要颜色或我使用 mixin 设置的任何颜色。 我试过了：

案例 a)

.mdc-tab__text-label{
@include mdc-tab-active-text-label-color(on-primary);
}

案例 b)

.mdc-tab__text-label{
--mdc-theme-primary: red;
}

案例 c)

.mdc-tab__text-label{
--mdc-theme-primary: $mdc-theme-on-secondary;
}

案例 A) 尝试使用简单的颜色作为"红色"，但使用的颜色仍然是备用颜色。

案例 b) 按预期工作为红色。

案例 c) 标签颜色为黑色，而不是红色，如themecolor.scss中定义的$mdc-theme-on-second-

还尝试过 a) b) 和 c) 使用

.mdc-tab--active .mdc-tab__text-label{
//repeating each case, only working the one with "red" value.
}

我认为我做的错误：

1-我使用了错误的混合来设置标签颜色。

2-我在themecolor.scc中使用了定义的颜色变量，因为我不知道css。

3-我的包含有问题。

4- 我的 SASS 变量没有被编译吗？

问题为什么没有定义 --mdc-theme-primary？为什么我不能指出themecolor.scss中定义的颜色？

任何帮助，不胜感激。

Answer 1

我通过做一些指南中没有解释的事情来解决这个问题。如果要使用主题设置，则必须将主题组件导入到项目中，如下所示：

app.scss

@import "./_themecolor";
@import "./_variables";
//----add these lines after custom imports-----
@import "@material/theme/mdc-theme";
@import "@material/theme/mixins";
//---------------------------------------------
@import "@material/top-app-bar/mdc-top-app-bar";

不需要其他任何颜色，所有颜色都将被定义。

谢谢伊普。我希望这对新人有帮助。