如何在不更改离子导航栏颜色的情况下更改离子菜单的标题颜色

Question

下面是离子导航栏的代码，右边有一个菜单图标。我想更改菜单标题的颜色。但当我改变离子导航条的颜色时，它也在改变菜单标题。我想要离子导航栏和离子菜单的单独颜色。

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

为了改变离子导航条的颜色，我在variable.scss 中添加了以下行

$toolbar-background: #EF473A;

有人能帮我如何保持两者的颜色分开吗？

Answer 1

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

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

如果你想改变整个标题的颜色，你可以在元素上这样做：

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

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