Блог

Главная - Вопросы по программированию - Как переопределить $ md-toolbar-min-height в Material2

Как переопределить $ md-toolbar-min-height в Material2

#angular #sass #angular-material2

#angular #sass #angular-material2

Вопрос:

Я пробую примерную программу Material 2

Высота md-toobar по умолчанию равна 64px и определяется в
материал toobar.scss

 @import '../core/style/variables';

$md-toolbar-min-height: 64px !default;
$md-toolbar-font-size: 20px !default;
$md-toolbar-padding: 16px !default;

Как я могу переопределить его до 32 пикселей в примере приложения material2-app-theme.scss?

 @import '~@angular/material/core/theming/all-theme';

// NOTE: Theming is currently experimental and not yet publically released!

@include md-core();

$primary: md-palette($md-deep-purple);
$accent:  md-palette($md-amber, A200, A100, A400);

$theme: md-light-theme($primary, $accent);

@include angular-material-theme($theme);

.m2app-dark {
  $dark-primary: md-palette($md-pink, 700, 500, 900);
  $dark-accent:  md-palette($md-blue-grey, A200, A100, A400);
  $dark-warn:    md-palette($md-deep-orange);

  $dark-theme: md-dark-theme($dark-primary, $dark-accent, $dark-warn);

  @include angular-material-theme($dark-theme);
}

Ответ №1:

Вы не можете переопределить конкретные переменные, потому что они уже сгорели в компоненте material2. Компиляция Scss уже выполнена для определенного стиля md-toolbar. Вы можете сделать что-то вроде:

 md-toolbar {
  min-height: 32px !important;
}
md-toolbar md-toolbar-row {
  height: 32px !important;
}

в вашей пользовательской теме. Я не могу найти какое-либо элегантное решение.

Комментарии:

1. Да, это то, что я тоже узнал. У меня есть демо -версия punker. Но это действительно плохо, поскольку мы тематизируем внутренние компоненты css md-toolbar . Это противоречит цели создания фреймворка пользовательского интерфейса.

2. Ответ принимается, поскольку это так, когда я отправляю вопрос.

Ответ №2:

Я знаю, что этот вопрос довольно старый, но у нас была аналогичная проблема, нам нужно было изменить цвета и другие глобальные стили, чтобы соответствовать нашему бренду. Подумал, что я хотел бы поделиться нашим вариантом ответа выше. Мы хотели избежать «!important» в нашем sass и иметь возможность повторно использовать стили при создании приложения, поэтому мы добавили переопределяющие селекторы в наш глобальный файл sass. Затем мы смогли просто добавить селекторы переопределения к любым элементам md, которые мы хотели переопределить. Это позволило нам уточнить, что мы переопределяли.

В приведенном ниже примере показано переопределение цвета фона и высоты панели инструментов. Все еще идет вразрез с фреймворком, но с точки зрения брендинга вам, по крайней мере, нужен контроль над цветами. Также обратите внимание, что если вы хотите добавить новые селекторы в переопределенный sass, вы можете просто добавить их в список селекторов md.

 <!-- md-toolbar example -->
<md-toolbar class="my-app-toolbar my-app-bg-color"></md-toolbar>

// override bg-color for md-button, md-card-content, md-toolbar
.md-button,
md-card-content,
md-toolbar {
  amp;.my-app-bg-color {
    background-color: #00acc1;
  }
}

// override md-toolbar
md-toolbar {
  amp;.my-app-toolbar {
    min-height: 32px;
    height: 32px;
  }
}