Изменение стиля контейнера оверлея

Я использую проект git для виртуальной клавиатуры (https://ngx-material-keyboard.github.io/demo/). И у меня есть некоторые проблемы с запуском его на небольшом устройстве с разрешением 450 * 250 пикселей.

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

Теперь мне нужно найти правильную позицию, чтобы сменить источники.

Для визуализации клавиатуры будет использован оверлейный компонент из angular2-material.

Если я закомментирую позицию в cdk-overlay-container, это сработает:

.cdk-overlay-container {
/* position: fixed; */
z-index: 1000;

}

Но я не могу перезаписать их из своего углового приложения. Какие-либо предложения?

Снимок экрана с изменениями


angular angular-material angular-material2 angular-cdk
person user1025633    schedule 10.08.2017    source источник

Ответы (5)


arrow_upward
31
arrow_downward

ОБНОВЛЕННЫЙ ОТВЕТ

Из официальной документации:

Компоненты наложения стиля

Компоненты на основе наложения имеют свойство panelClass (или подобное), которое можно использовать для нацеливания на панель наложения.

Вы можете переопределить стили контейнера диалогового окна по умолчанию, добавив класс css в свой глобальный styles.css. Например:

.custom-dialog-container .mat-dialog-container {
    /* add your styles */
}

После этого вам нужно будет указать свой класс css как параметр panelClass в вашем диалоге:

this.dialog.open(MyDialogComponent, { panelClass: 'custom-dialog-container' })

Прочтите эту официальную документацию для получения дополнительной информации.

ОРИГИНАЛЬНЫЙ ОТВЕТ

Используйте ::ng-deep в вашем component.css, чтобы переопределить стили по умолчанию.

::ng-deep .cdk-overlay-container {
    /* Do you changes here */
    position: fixed; 
    z-index: 1000;
}
person Faisal    schedule 10.08.2017
comment
Стоит отметить, что :: ng-deep устарел, но я не могу найти разъяснений по таймфреймам или альтернативам. - person Mark; 05.07.2018
comment
:: ng-deep не остается в изолированной области видимости, он также повлияет на другие представления - person Mar; 19.07.2018
comment
Что делать, если мне нужно установить z-index .cdk-overlay-container отдельно для mat-menu и mat-dialog. поскольку у меня фиксированный заголовок на моем сайте - person Awais; 16.10.2019

arrow_upward
3
arrow_downward

Чтобы иметь возможность переопределить классы CSS материала из стилей компонентов, вам необходимо установить Отобразить инкапсуляцию в компоненте «Нет»:

@Component({
    templateUrl: './my.component.html' ,
    styleUrls: ['./my.component.scss'], //or .css, depending what you use
    encapsulation: ViewEncapsulation.None,
})
person Andrei Matracaru    schedule 10.08.2017

arrow_upward
2
arrow_downward

Если вы хотите изменить стиль mat-dialog-container, достаточно добавить класс панели и задать стиль, но в случае, если вы хотите изменить стиль cdk-overlay-container, тогда добавление backdropClass поможет

const dialogRef = this.dialog.open(PopupComponent, {
  backdropClass: 'popupBackdropClass',
  panelClass: 'custom-dialog-container',
  data: { data: data }
});

в css добавить

.popupBackdropClass {
   background-color:yellow
 }
person Pran R.V    schedule 24.09.2019

arrow_upward
1
arrow_downward

Я сам разбираюсь с этим, используя две таблицы стилей: одну Global и другую таблицу стилей component's. В глобальном я установил z-index на более низкое значение (1000), чтобы он шел за header, а в таблице стилей компонентов popup я установил это на высокое значение (2000) с !important, чтобы заголовок находился за моим оверлеем.

Вот как мне удается это решить.

Отблагодаришь позже

person Awais    schedule 17.10.2019

arrow_upward
0
arrow_downward

Я обнаружил это, используя основной / стандартный "Styles.css". Изменения стиля для CDK (а также материалов и анимации) подобраны правильно. (предостережение) Я использую Angular 4.

person B Stensrud    schedule 31.10.2017