My own styles in angular material ui

Question

material-ui and I want to customize it. Unfortunalety my own styles are overwritten by the framework styles. For example when I declare styles for md-toolbar

md-toolbar {
    background: red;
}

this declaration is overwritten by material. I added !important directive and it helped but I don't want to use it everywhere. How should I customize material in an appropriate way?

Answer 1

Best method which I know, without recompilling less, sass, etc.:

You should apply custom theme:

angular.module('myApp').config(['$mdThemingProvider', function($mdThemingProvider) {
    $mdThemingProvider.theme('myAwesome')
        .primaryPalette('blue')
        .accentPalette('cyan')
        .warnPalette('red');
    $mdThemingProvider.setDefaultTheme('myAwesome');
}]);

After that elements get class: md-myAwesome-theme so you can add style in your css (or less) file:

md-select.md-myAwesome-theme {
    margin: 0;
    padding: 0;
}