Как переопределить $ мД-панель инструментов-мин-высота в Материал2

Question

Я пытаюсь из Material 2 Sample Program

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

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

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

Как я могу переопределить его до 32px в sample app 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); 
} 

Answer 1

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

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

в вашей теме. Я не могу найти ничего элегантного решения.

Answer 2

Я знаю, что этот вопрос добрый, но у нас была аналогичная проблема, нам нужно было изменить цвета и другие глобальные стили в соответствии с нашим брендом. Думал, что поделился бы нашим вариантом ответа выше. Мы хотели избежать «важности» в нашем 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 { 
    &.my-app-bg-color { 
    background-color: #00acc1; 
    } 
} 

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