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         


        

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 found a work around on how you can make the toolbar transparent. you wrap your toolbar in a div and give it a class name. Then in your css you access your toolbar through the class name you put in the wraping div. here a snippet of my code.

This is my HTML

<section id="learn" class="navbar">
<md-toolbar layout="row" layout-align="space-between center">
    <span>
        <h3 class="md-toolbar-tools">Something</h3>
    </span>

This is my css

.navbar md-toolbar {
background-color: transparent;
}

Hope this help!

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!