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?

Epanorthosis

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

Darfur

Answer 2

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!

Tollgate

Answer 3

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!

Taxonomy

I think this is the easiest and clean solution to avoid having to recompile the sass/less of angular material. – Maricruzmaridel

Answer 4

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>

Rheometer

I guess inline styles are OK for doing a quick mock up for a single element, but the OP was asking how to do include several styles. – Casein

It worked. Someone could benefit from it, so I posted it. There are lots of examples where answers elaborated from the strict wording of the question to help someone. Based on your reasoning, you could have just as arbitrarily down voted the question because he mentioned multiple styles but just gave one example. – Rheometer

Answer 5

You can also disable Angular material themes:

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

Redheaded

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

Extradition

Stylling child of an angular directive won't help. I have background for h3 element but rest of the toolbar has its own blue color form the default palette. These themes are ok but not in my case I have a very colorful page to bulid so I wanted delcare colors in my css stylesheet but the framework doesn't help – Epanorthosis

And it's also not only about colors. I wanted to change many others things like paddings, margins, positions of a form element.. – Epanorthosis

Then you make the h3 take up full width and height. Anyway, if you need to make adjustments like that, then follow their suggestion here and update the scss file and make yourself a custom build. – Extradition

so should I download those files and then compile it? github.com/angular/material/tree/master/src/core/style – Epanorthosis

I haven't done this yet, from their instructions, you should download the whole thing run gulp to build out the js and css files. – Extradition

Thanks for help. Actually, I left the idea of using material ui in my project. It's really nice lib but simply doesn't fit requirements of my app. – Epanorthosis

Yeah, I am using it, but it is quite opinionated, and early in development. – Extradition

Answer 7

**Custom css in Angular material ** you can use your custom scss or css in Angular material component by useing ::ng-deep

::ng-deep .customeNavbar{
    padding: 32px 0px;
    .customeNavbarDropdown{
        &::after{
            content: "";
            position: absolute;
            right: -11px !important;
            top: 19px;
       }
    }
} 


/* you can use either first or second    */

 mdb-navbar ::ng-deep{
     .customeNavbar{
        padding: 32px 0px;
    }
    .customeNavbarDropdown{
       &::after{
             content: "";
             position: absolute;
            right: -11px !important;
             top: 19px;
       }
     }
 }

<mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark bg-primary customeNavbar"> 
        <links>
            <!-- Links -->
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                <a class="nav-link waves-light" mdbWavesEffect>Home<span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                <a class="nav-link waves-light" mdbWavesEffect>Features</a>
                </li>
                <li class="nav-item">
                <a class="nav-link waves-light" mdbWavesEffect>Pricing</a>
                </li>
        
                <!-- Dropdown -->
                <li class="nav-item dropdown" dropdown>
                <a dropdownToggle mdbWavesEffect type="button" class="nav-link dropdown-toggle waves-light customeNavbarDropdown" mdbWavesEffect>
                    Basic dropdown<span class="caret"></span></a>
                <div *dropdownMenu class="dropdown-menu dropdown dropdown-primary" role="menu">
                    <a class="dropdown-item waves-light" mdbWavesEffect href="#">Action</a>
                    <a class="dropdown-item waves-light" mdbWavesEffect href="#">Another action</a>
                    <a class="dropdown-item waves-light" mdbWavesEffect href="#">Something else here</a>
                    <div class="divider dropdown-divider"></div>
                    <a class="dropdown-item waves-light" mdbWavesEffect href="#">Separated link</a>
                </div>
                </li>
            </ul>
            <!-- Links -->
        </links>
    </mdb-navbar>

Mediatory