为什么我不能在我的ionic vue组件中使用css类选择器更改ion标头的背景色？

我已经开始学习爱奥尼亚vue。我正在尝试使用离子组件的css。 所以我在同一个文件中添加了样式

<style scoped>
    .abc {
        background-color: blue;
    }
</style>

.美国广播公司{
背景颜色：蓝色；
}

并试图用

<ion-content class ="abc">
    <ion-header>
        <ion-toolbar>
            <ion-title size="large">My Navigation Bar</ion-title>
        </ion-toolbar>
    </ion-header>
</ion-content>

我的导航栏

但它不起作用。我该怎么做？ 这是我的全部代码

<template>
  <ion-page>
    <ion-content class ="abc">
        <ion-header>
          <ion-toolbar>
            <ion-title size="large">My Navigation Bar</ion-title>
          </ion-toolbar>
        </ion-header>
    </ion-content>
  </ion-page>
</template>

<script>
    import { IonContent, IonPage } from "@ionic/vue";
    import { defineComponent } from "vue";

    export default defineComponent({
        name: "Home",
        components: {
            IonContent,
            IonPage
        },
    });
</script>

<style scoped>
    .abc {
        background-color: blue;
    }
</style>

我的导航栏
从“@ionic/vue”导入{IonContent，IonPage}；
从“vue”导入{defineComponent}；
导出默认定义组件({
姓名：“家”，
组成部分：{
爱雍容，
伊恩佩奇
},
});
.美国广播公司{
背景颜色：蓝色；
}

我不得不更改代码如下

<style scoped>
    .abc {
        --background: blue;
    }
</style>

.美国广播公司{
--背景：蓝色；
}

然后从工具栏中选择css类

<ion-toolbar class="abc">