我在棱角材质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');
}]);

在元素获得类之后：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;
}

希望获得帮助！

Answer 4

我为此苦苦挣扎，因为我不想创建一个全新的味蕾，而只是想模拟一个新的版面。我像这样使用CSS内联样式，它起作用了！

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

Answer 5

您也可以禁用Angular材质主题：

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

Answer 6

您可以直接在组件上应用不同的主题，如其主题页面上所示：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;
}