Не определены цвета темы MDC-Web CSS - PullRequest
Новая
       31

Не определены цвета темы MDC-Web CSS

0 голосов
/ 11 июня 2019

При локальном запуске моего внешнего интерфейса я проверяю элемент кнопки, а цвет --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;
}

дело в) 

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

дело а) пытался использоватьтакже простой цвет, как «красный», и все же используемый цвет - запасной.

корпус b) работает как задумано, будучи красным.

корпус 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 ? ​​

Любая помощь приветствуется.

1 Ответ

0 голосов
/ 12 июня 2019

Я исправил это, сделав что-то, что не объяснено в руководстве. Если вы хотите использовать их, вы должны импортировать компонент темы в ваш проект следующим образом:

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

Больше ничего не нужно, все цвета будут определены.

Спасибо тебе. Я надеюсь, это поможет новичкам.

...