为什么我不能在我的 ionic vue 组件中使用 css class 选择器更改 ion-header 的背景颜色？

Question

我开始学习ionic 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>

Answer 1

我必须按以下方式更改代码

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

和select工具栏中的cssclass

<ion-toolbar class="abc">

为什么我不能在我的 ionic vue 组件中使用 css class 选择器更改 ion-header 的背景颜色？

why i can not change background color of ion-header with css class selector in my ionic vue component?

css

vue.js

ionic-framework

ionic-vue