Как удалить стиль кнопки или перезаписать динамически добавленные классы для кнопки в материале 2 - PullRequest
Новая
       6

Как удалить стиль кнопки или перезаписать динамически добавленные классы для кнопки в материале 2

0 голосов
/ 02 июня 2018

У меня есть кнопка «Открыть» 

<button mat-raised-button (click)="openModal()
"type="button" color="primary">Open Modal </button>

При нажатии кнопки, всплывающее окно модального открытия и после закрытия модального.К этой кнопке добавлены классы cdk-focused и cdk-program-focused, и они получат некоторый волновой эффект.

Я хочу избавиться от этого стиля, хочу удалить или перезаписать те классы, которые добавлены в кнопку после закрытия модального режима *

enter image description here

Ответы [ 2 ]

0 голосов
/ 04 июня 2018 
.mat-button-focus-overlay {
 background-color:transparent !important;
}

.mat-app-background{
  background: transparent !important
}
0 голосов
/ 04 июня 2018

Я предлагаю два решения:

1. Сначала установите на этой кнопке дополнительный класс, чтобы избежать изменения стиля на всех кнопках с поднятым матом,я полагаю, это не ваша цель.

HTML:

<button mat-raised-button class="myButton" (click)="openDialog();">Pick one</button>

CSS: 

.myButton:focus{
    box-shadow: 0 0 rgba(255, 255, 255, 1) !important;
    transition:none !important;
    background-color: rgba(255, 255, 255, 1) !important;
    -webkit-tap-highlight-color:rgba(255, 255, 255, 1) !important;
}

Затем вы можете установить стиль поднятой кнопки, либо

a) установив его в таблице стилей компонента с помощью :: ng-deep: 

::ng-deep .myButton>.mat-button-focus-overlay {
    background-color:transparent !important;
}

::ng-deep .mat-app-background{
  background: white !important
}

Демонстрация

b) настройка с помощью ViewEncapsulation.none:

Класс: 

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

CSS: 

.myButton>.mat-button-focus-overlay {
    background-color:transparent !important;
}

.myButton>.mat-app-background{
  background: white !important
}

Демо

в) установка его в style.css: 

.myButton>.mat-button-focus-overlay {
    background-color:transparent !important;
}

.myButton>.mat-app-background{
  background: white !important
}

Демо

Кнопка получает фокус при нажатии на нее.Отключите фокус от этой кнопки, установив фокус на другой элемент:

... <input matInput #input [(ngModel)]="name" placeholder="What's your name?"> ... <button mat-raised-button class="myButton" (click)=" input.focus();openDialog() ">Pick one </button>

Демо

...