1

我有下面的离子导航栏代码，我在右侧有一个菜单图标。而且我想更改该菜单标题的颜色。但是当我更改 ion-navbar 的颜色时，菜单标题的颜色也会发生变化。我想要 ion-navbar 和 ion-menu 的颜色不同。

<ion-menu [content]="content" side="right" id="menu2">
    <ion-header>
        <ion-toolbar class="menu_header">
            <ion-title>MyApp</ion-title>
        </ion-toolbar>
    </ion-header>
    <ion-content>
        <ion-list no-lines>
             <button ion-item  menuClose="menu2" detail-none>
              Item1
            </button>
            <button ion-item  menuClose="menu2" detail-none>
                Item2
            </button>
        </ion-list>
    </ion-content>
</ion-menu>
<ion-header>
    <ion-navbar primary>
        <ion-title class="header-title" text-center>
            Home
        </ion-title>
        <button ion-button icon-only menuToggle="right" end >
            <ion-icon name="menu"></ion-icon>
        </button>
    </ion-navbar>
</ion-header>

为了改变 ion-navbar 的颜色，我在 variable.scss 中添加以下行

$toolbar-background: #EF473A;

谁能帮助我如何保持两者的不同颜色？

4

1 回答 1

0

如果您只想更改标题的颜色，您可以使用这些类

.header-title {
  color: blue;
}
.menu_header {
  color: #EF473A;
}

如果您想更改整个标题的颜色，您可以在元素上执行此操作：

body > ion-header {
  color: blue;
}
ion-menu > ion-header {
  color: #EF473A;
}

或者向要修改的元素添加一个类，但这可能意味着编辑第三方组件......

于 2018-11-27T10:21:47.887 回答