Блог

Я использую Angular-material в качестве основы основного стиля для своего веб-сайта и пытаюсь удалить класс, ориентированный на md, добавленный по умолчанию в основную кнопку диалогового окна подтверждения.

Потратив некоторое время на поиск в Интернете, я обнаружил проблему, которая предлагает следующий ответ:

 var confirm = $mdDialog.confirm({
    onComplete: function afterShowAnimation() {
             var $dialog = angular.element(document.querySelector('md-dialog')),
             $confirmButton = $dialog.find('md-dialog-actions').children()[1];

             angular.element($confirmButton).removeClass('md-focused');
         }
})
.title('my title'))
.textContent('myContent')
.ariaLabel('my aria label')
.ok('ok text')
.cancel('cancel text');
  

Это решение работает нормально, но я не хочу использовать javascript для изменения DOM.

Мой вопрос в том, есть ли какой-либо способ удалить класс, ориентированный на md, используя только CSS, переопределяя классы.

Любая подсказка будет оценена.

Спасибо вам всем!

Обновление — решено

Вместо onComplete я использую optionsOrPreset.focusOnOpen и устанавливаю для него значение false.

Вот код:

 var confirm = $mdDialog.confirm({focusOnOpen: false})
    .title('my title'))
    .textContent('myContent')
    .ariaLabel('my aria label')
    .ok('ok text')
    .cancel('cancel text');

$mdDialog.show(confirm).then(...);
  

Вам просто нужно переопределить каждый стиль, который вы хотите, с помощью ключевого слова !important

 .md-button.md-focused {
  background-color: rgba(0,0,0,0) !important;
}