How to override styles from CSS framework (MDL) correctly

I started a new project and decided to use MDL (https://getmdl.io) as the foundation. Now I wonder (I cannot find anything about this actually), what you would consider to be the best way to override / extend styles?

In MDL for example I have

.mdl-dialog {
  border: none;
  box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2);
  width: 280px; 
}

and I would like to get rid of the shadow.

Obviously I will not overide / extend it in the material.css but I'm not if I should add an .mdl-dialog-entry to my custom.css, or if I create a new class (lets say .my-dialog) and add it to the DOM-Element.

Also there are DOM-Elements, that get added by JS, for those I cannot use my own classname ...

Maybe a wrapping Element with my own classname and then .my-class .mdl-dialog?

What is the right way to do this?