我自己的风格在角料UI [英] My own styles in angular material ui

问题描述

材料UI和我希望对它进行定制。 Unfortunalety我自己的风格是由框架样式覆盖。例如，当我申报MD-工具栏风格

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?

推荐答案

最好的方法，我知道，没有recompilling少，青菜等。

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');
}]);

之后元素得到类： MD-myAwesome主题这样你就可以在你的CSS样式添加（或更少）的文件：

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

这篇关于我自己的风格在角料UI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！