Change angular-material for a $mdDialog

Question

I want to remove the gray background when you hover over the 'yes' and 'no' buttons of my $mdDialog . I have managed to change the color of the text by changing it in the angular-material.css . Any ideas?

Here is a pic of the 'NO' and 'YES' buttons I am referring to:

Answer 1

First of all, do not modify original sources of the library. Once you decide to update it to a newer version, all of your changes will be lost. Much better practice is to override original styles with your own. In order to do that, create a separate css file and add it to your site after angular-material.css .

To modify background color of buttons in a dialog, you need the following code:

md-dialog .md-button:not([disabled]):hover {
    background-color: transparent !important;
}

.md-button:not([disabled]):hover is a class responsible for styling hover color of md-button controls. In this case, !important is needed to override original color of buttons. Finally, md-dialog at the beginning ensures that your styles will be applied only inside dialogs.

Update 1 - Alternative solution

Another but more complicated solution is creating a custom confirmation dialog. This way you can completely change appearence of the dialog by using your own template. You can find more about custom dialogs in the Angular Material documentation:

https://material.angularjs.org/latest/demo/dialog