angularjs - 我自己的 Angular Material 用户界面样式

Question

material-ui，我想对其进行自定义。不幸的是，我自己的样式被框架样式覆盖。例如，当我声明md-toolbar的样式时

md-toolbar {
    background: red;
}

该声明被 Material 覆盖。我添加了 !important指令，它有所帮助，但我不想在任何地方使用它。我应该如何以适当的方式自定义 Material ？

Answer 1

我知道的最好的方法，而无需重新编译，sass等:

您应该应用自定义主题:

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

之后，元素获得类: md-myAwesome-theme，因此您可以在css(或更少)文件中添加样式:

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