it-swarm.com.ru

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

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

enter image description here

Его код:

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

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

enter image description here

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

Заранее спасибо

13
Kimy BF

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

Попробуй это:

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

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

31
André

Если вы можете решить свои проблемы со стилем с помощью материалов 2, то это будет "правильный" способ, которым можно услышать, это ссылка на там сайт . 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 означает?

9
KJR

Лучшие решения /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,
})

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

6
Avolition

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

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

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

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

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

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

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

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

/deep/.className {
... your code goes here
}
1
Prashanth Damam