My own styles in angular ui stuff

Question

material-ui, and I want to configure it. Unfortunately, my styles are overwritten with frame styles. For example, when I declare styles for md-toolbar

md-toolbar { background: red; } 

this declaration is rewritten by the material. I added the !important directive and it helped, but I do not want to use it everywhere. How can I adjust the material accordingly?

Answer 1

The best way I know without re-feeding less is sass etc:

You must apply a special theme:

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

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

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

Answer 2

UI design disruptions can be such a pain. With Angular Material, I found that creating a separate css file, often called override-material-ui, and using identifier selectors to change styles instead of class names works very well. So for your code, this will be:

 #override-toolbar { background: red; } 

And the tag in html will look like this:

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

Obviously there will probably be more in the toolbar tag, but to redefine the styles, I believe this works best. This is good when you need to style multiple tags the same way. While inline effectively cancels everything out, annoying style changes may occur in the future.

But even if the ID selector doesn't crop it, and you don’t want to deal with custom themes, go to the inline style selector.

Hope this helps!

Answer 3

I found work on how to 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 that you insert in the breaking div. here is 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 4

I struggled with this, since I did not want to create a completely new pallat and just wanted to make a layout for a new part of the layout. I used CSS inline style and it worked!

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

Answer 5

You can also disable Angular material themes:

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

Answer 6

You can apply another theme directly to the components, as shown on their theme page: https://material.angularjs.org/#/Theming/04_multiple_themes

And if none of the built-in themes is applicable, you can flip your own: https://material.angularjs.org/#/Theming/03_configuring_a_theme

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

If you want to override styles, do not apply the style directly to the md- directive, but insert the element created by the directive and create a child element:

 md-toolbar > h2 { background: red; }