При локальном запуске моего внешнего интерфейса я проверяю элемент кнопки, и цвет --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 Проверить результат элемента, --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;
}
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 на кнопке является резервным цветом, а не основным цветом или тем, что я установил с помощью миксина. Я пытался:
случай а)
.mdc-tab__text-label{
@include mdc-tab-active-text-label-color(on-primary);
}
случай б)
.mdc-tab__text-label{
--mdc-theme-primary: red;
}
случай c)
.mdc-tab__text-label{
--mdc-theme-primary: $mdc-theme-on-secondary;
}
случай а) попытался использовать также простой цвет, такой как «красный», и все же использованный цвет является запасным.
случай б) работает по назначению, будучи красным.
случай c) цвет метки черный вместо красного, как для $ mdc-theme-on-secondary, определенного в themecolor.scss
Также пробовал а) б) и в) с помощью
.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?
Любая помощь приветствуется.