angularjs - 我自己在角度材料 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>

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

但是，如果即使是 ID 选择器也无法解决问题，并且您不想处理自定义主题，请选择内联样式选择器。

希望这可以帮助！

Answer 3

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

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

Answer 4

我找到了有关如何使工具栏透明的解决方法。您将工具栏包装在一个 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 5

我为此苦苦挣扎，因为我不想创建一个全新的面板，只想为新的布局做一个模型。我使用了这样的 CSS 内联样式，并且成功了！

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

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

Answer 7

**Angular 材质中的自定义 css ** 您可以通过使用 ::ng-deep 在 Angular 材质组件中使用您的自定义 scss 或 css

::ng-deep .customeNavbar{
    padding: 32px 0px;
    .customeNavbarDropdown{
        &::after{
            content: "";
            position: absolute;
            right: -11px !important;
            top: 19px;
       }
    }
} 


/* you can use either first or second    */

 mdb-navbar ::ng-deep{
     .customeNavbar{
        padding: 32px 0px;
    }
    .customeNavbarDropdown{
       &::after{
             content: "";
             position: absolute;
            right: -11px !important;
             top: 19px;
       }
     }
 }

<mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark bg-primary customeNavbar"> 
        <links>
            <!-- Links -->
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                <a class="nav-link waves-light" mdbWavesEffect>Home<span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                <a class="nav-link waves-light" mdbWavesEffect>Features</a>
                </li>
                <li class="nav-item">
                <a class="nav-link waves-light" mdbWavesEffect>Pricing</a>
                </li>
        
                <!-- Dropdown -->
                <li class="nav-item dropdown" dropdown>
                <a dropdownToggle mdbWavesEffect type="button" class="nav-link dropdown-toggle waves-light customeNavbarDropdown" mdbWavesEffect>
                    Basic dropdown<span class="caret"></span></a>
                <div *dropdownMenu class="dropdown-menu dropdown dropdown-primary" role="menu">
                    <a class="dropdown-item waves-light" mdbWavesEffect href="#">Action</a>
                    <a class="dropdown-item waves-light" mdbWavesEffect href="#">Another action</a>
                    <a class="dropdown-item waves-light" mdbWavesEffect href="#">Something else here</a>
                    <div class="divider dropdown-divider"></div>
                    <a class="dropdown-item waves-light" mdbWavesEffect href="#">Separated link</a>
                </div>
                </li>
            </ul>
            <!-- Links -->
        </links>
    </mdb-navbar>