我自己的角度材料风格ui

Question

material-ui我想定制它.不幸的是,我自己的风格被框架样式覆盖了.例如,当我为md-toolbar声明样式时

md-toolbar {
    background: red;
}

该声明被材料覆盖.我添加了!important指令,它有所帮助,但我不想在任何地方使用它.我该如何以适当的方式定制材料？

Answer 1

我知道的最好的方法,没有重新编译,sass等:

您应该应用自定义主题:

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

之后元素获得class:md-myAwesome-theme所以你可以在你的css(或更少)文件中添加样式:

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

Answer 2

您可以直接在组件上应用不同的主题，如主题页面所示： https: //material.angularjs.org/#/Theming/04_multiple_themes

如果没有内置主题适用，您可以推出自己的主题： https: //material.angularjs.org/#/Theming/03_configuring_a_theme

如果您需要进行诸如padding、 或 之类的调整margin，请更新scss文件，为自己定制一个自定义版本：https://material.angularjs.org/#/Theming/01_introduction

如果您确实想覆盖样式，请不要将样式直接应用于md-指令，而是深入研究指令创建的元素并设置子元素的样式：

md-toolbar > h2 {
    background: red;
}