样式 Angular Material 导航栏

Question

我在工具栏中有一个 Angular Material 导航栏作为 header。问题是导航栏选项卡的下划线固定为默认粉红色。这与我页面的配色方案冲突。相关代码。

<div ng-controller="navCtrl" ng-cloak>
    <md-content md-theme="docs-dark" layout-gt-sm="row" layout-padding>
        <md-toolbar class="md-hue-2">
            <md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links">
                <md-nav-item md-nav-href="#/" name="home">Home</md-nav-item>
                <md-nav-item md-nav-href="#/about" name="about">About</md-nav-item>
            </md-nav-bar>
        </md-toolbar>
    </md-content>
</div>

这在应用程序的配置中。

$mdThemingProvider.theme('docs-dark', 'default')
        .primaryPalette('grey')
        .warnPalette('red')
        .accentPalette('blue')
        .dark();

欢迎任何帮助。

Answer 1

您只需要在 css 文件中使用 md-nav-bar md-nav-ink-bar css 属性。

md-nav-bar md-nav-ink-bar {
  background: green;
}

这是一个工作示例。 http://codepen.io/next1/pen/yJaojP

Answer 2

更新到最新版本angular-material

这是个问题。

样式 Angular Material 导航栏

Style Angular Material Nav bar

html

javascript

angularjs

angular-material