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

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

You can also disable Angular material themes:

angular.module('myApp', ['ngMaterial'])
   .config(function($mdThemingProvider) {
       $mdThemingProvider.disableTheming();
   });

Answer 4

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 5

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!

Answer 6

You can apply different theme's directly on components as seen on their theme page:https://material.angularjs.org/#/Theming/04_multiple_themes

And if none of the built in theme's apply, you can roll your own:https://material.angularjs.org/#/Theming/03_configuring_a_theme

And if you need to make adjustments like padding, or margin, then update the scss file get yourself a custom build: https://material.angularjs.org/#/Theming/01_introduction

If you do want to override styles, don't apply the style directly to the md- directive but dig into the element that is created by the directive and style a child:

md-toolbar > h2 {
    background: red;
}