我自己在angular material ui中的样式

Question

material-ui，我想要自定义它。不幸的是，我自己的风格被框架风格覆盖了。例如，当我为md工具栏声明样式时

md-toolbar {
    background: red;
}

此声明已被材料覆盖。我添加了!important指令，它很有帮助，但我不想到处使用它。我应该如何以合适的方式定制素材？

Answer 1

我所知道的最好的方法，而不是补偿少、粗鲁等：

您应该应用自定义主题：

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

覆盖UI设计可能是一件痛苦的事情。对于Angular Material，我发现创建一个单独的css文件(通常称为override-material-ui )，并使用id选择器来更改样式而不是类名，效果非常好。因此，对于您的代码，它将是：

#override-toolbar {
   background: red;
}

html中的标记将如下所示：

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

显然，工具栏标记中可能会有更多内容，但对于覆盖样式，我发现这是最好的。当您必须以相同的方式设置多个标签的样式时，这是很好的。虽然内联可以有效地覆盖所有内容，但以后更改样式可能会很烦人。

但是，如果即使是ID选择器也不能处理它，并且您不想处理自定义主题，那么可以使用内联样式选择器。

希望这能有所帮助！

Answer 3

我找到了一个方法来解决如何使工具栏透明的问题。您可以将工具栏包装在div中，并为其指定一个类名。然后，在css中，通过放入包装div中的类名访问工具栏。下面是我的代码片段。

这是我的HTML

<section id="learn" class="navbar">
<md-toolbar layout="row" layout-align="space-between center">
    <span>
        <h3 class="md-toolbar-tools">Something</h3>
    </span>

这是我的css

.navbar md-toolbar {
background-color: transparent;
}

希望这对你有所帮助！