Question

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

检查元素：

Index.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 Inspect元素结果，-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);
}

使用Theming Guide！我的文件设置如下：

_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;

  }

app.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'));

在滚动栏中为该站点提供服务，按钮中 Home 标签的颜色是后备颜色，而不是原色或我用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-secondary

还尝试了

的a）b）和c）

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

我认为我有错误：

1-我使用错误的mixin设置标签颜色。

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";

不需要什么，所有的颜色都将被定义。

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

未定义MDC-Web CSS主题颜色

1 个答案: