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;
}

Answer 2

I struggled with this as I didn't want to create an entire new pallate and just wanted to do a mock up for a new piece of the layout. I used CSS inline styling like this and it worked!

<md-toolbar style="background:indigo" layout="row" layout-align="space-between center">
...
</md-toolbar>

Answer 3

Overriding UI designs can be such a pain. With Angular Material, I found that making a separate css file, often called override-material-ui, and using id selectors to change the styles instead of class names works pretty well. So for your code, it would be:

#override-toolbar {
   background: red;
}

And the tag in the html would look like:

<md-toolbar id="override-toolbar">
</md-toolbar>

Obviously the toolbar tag would probably have more going on in it, but for override styles I find that this works best. It's nice when you have to style multiple tags the same way. Although inline effectively overrides everything, it can be annoying to change styles later on.

But, if even an ID selector won't cut it, and you don't want to deal with custom themes, go for the inline style selector.

Hope this helps!