Ionic + Vue.js项目中修改元素CSS样式不生效的问题求助

我目前正在学习使用Ionic结合Vue.js开发项目，想实现一个非常简单的需求——修改页面头部的背景颜色，但尝试了自己的写法后完全没有效果，也没找到能说明清楚这个问题的文档，有没有大佬能帮我看看问题出在哪？

我写的组件代码如下：

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar class="header">
        <img class="icon" src="/icon.svg"/>
        <ion-title class="title">Name</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content :fullscreen="true">
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">Tab 1</ion-title>
        </ion-toolbar>
      </ion-header>

      <ExploreContainer name="Tab 1 page" />
    </ion-content>
  </ion-page>
</template>

<script setup lang="ts">
</script>

<style>
  .icon {
    width: 4rem;
    height: auto;
    margin-right: 8px;
  }

  ion-header {
    background-color: red;
  }
</style>

我尝试直接给ion-header设置background-color: red;，但页面头部的背景色完全没有变化，实在搞不懂问题所在，麻烦大家帮忙解答一下，谢谢！

备注：内容来源于stack exchange，提问作者Lucas Van Vooren