Как перезаписать angular 2 стили материала?

У меня есть этот выбор в материале angular:

Его код:

<md-select placeholder="Descuentos y convenios" [(ngModel)]="passenger.discount">
        <md-option [value]="null" [disabled]="true">
            Descuentos
        </md-option>
        <md-option *ngFor="let option of discounts" [value]="option">
            {{ option }}
        </md-option>
        <md-option [value]="null" [disabled]="true">
            Convenios
        </md-option>
        <md-option *ngFor="let option of agreements" [value]="option">
            {{ option }}
        </md-option>
</md-select>

И я хотел бы иметь в нем следующие стили:

Я попытался поместить некоторые классы в md-select и md-option, но не работал. Я хотел бы, может быть, просто пример того, как поместить цвет фона или границу, и это даст мне представление.

Заранее благодарю

Ответы

Ответ 1

Я думаю, что классы должны работать, но вам может потребоваться использовать /deep/ из-за инкапсуляции вида.

Попробуйте следующее:

/deep/ md-select.your-class {
  background-color: blue;
}

Вы также можете играть с theming.

Ответ 2

Если вы можете решить свои проблемы стиля с помощью материала 2 scss theming, который будет "правильным" способом, это ссылка на сайт. https://material.angular.io/guide/theming.

Однако я использовал! важно для стилей, которые я не хотел перезаписывать стили материалов.

Вот как я его использовал:

/*hack to get rid of a scrollbar*/
.cdk-focus-trap-content{
    overflow-x: hidden !important;
}

/*hack to get rid of a padding on the popup*/
.mat-dialog-container{
     padding: 0px !important;
 }

У меня была ситуация, когда в md-sidenav отображалась горизонтальная полоса прокрутки, и я избавился от их заполнения по умолчанию в диалоговом окне md.

Не самое элегантное решение, но я надеюсь, что это поможет.

Это еще один вопрос StackOverflow, в котором обсуждается, что важно.

Что важно в CSS?

Ответ 3

Лучшие решения /deep/, >>> и ::ng-deep устарели и больше не должны использоваться.

Изменение: Слово предупреждения. Я не рекомендую использовать этот метод вообще (по состоянию на январь 2019 г.), так как установка ViewEncapsulation.None приведет к тому, что любой из этих компонентов css станет глобальным стилем (он не позволяет Angular создавать атрибуты ng_xxx для css-области видимости компонента). Это приведет к глобальному конфликту стилей, особенно с лениво загруженным модулем css.

Наше решение ViewEncapsulation состояло в том, чтобы переопределить очень специфичные CSS, используя высокоспецифичные селекторы CSS в 1) глобальном CSS или 2) создавая отдельные файлы стилей для определенных видов/стилей/элементов, импортируя их в каждый требуемый компонент (например, styleUrls: [material-table-override.css, component.css]).

Я использовал ViewEncapsulation.None, чтобы успешно переопределить стили таблиц материалов в пределах одного компонента в Angular 6.

На вашем компоненте:

import { ViewEncapsulation } from '@angular/core';
// ...
@Component({
    // ...
    encapsulation: ViewEncapsulation.None,
})

Здесь отличная статья на эту тему

Ответ 4

Правильный способ изменить стили классов наложения, таких как mat-dialog-container, - это использовать panelClass в соответствии с пользовательской настройкой стилей компонентов angular материала:

Добавьте это в свою глобальную таблицу стилей после настройки темы

.myapp-no-padding-dialog .mat-dialog-container {
  padding: 0;
}

Используйте следующее, чтобы открыть диалоговое окно

this.dialog.open(MyDialogComponent, {panelClass: 'myapp-no-padding-dialog'})

Ответ 5

Вы можете попробовать добавить этот код.

.mat-dialog-container{
     padding: 0px !important;
}

Если это не работает, вы можете использовать

/deep/.className {
... your code goes here
}

Ответ 6

:: ng-deep для меня работает как шарм... для scss и sass файлов.

Ответ 7

Я делаю это таким образом всякий раз, когда мне нужно удалить свиток из mat-sidenav-container

   .mat-sidenav-container-classname ::ng-deep mat-sidenav-content {
      overflow: hidden;
    }