Ionic 4 自定义样式阴影 DOM

Question

一直在尝试更改页脚背景，但我做不对。我有每个标签的颜色，但只有最后一个标签被更改（蓝色 - #0000ff）。如何在 Ionic 4 中做造型？

<template>
  <ion-footer>
    <ion-toolbar>
      <ion-title v-if="loggedIn">
        <a href="https://www.facebook.com/" target="_blank">
          <ion-icon name="logo-facebook"></ion-icon>
        </a>
        <a href="https://www.instagram.com/" target="_blank">
          <ion-icon name="logo-instagram"></ion-icon>
        </a>
      </ion-title>
    </ion-toolbar>
  </ion-footer>
</template>

<script>
export default {
  name: "pageFooter",
  computed: {
    loggedIn() {
      return this.$store.getters.loggedIn;
    }
  }
};
</script>

<style lang="scss">
ion-footer {
  background-color: #ff0000;
  ion-toolbar {
    background-color: #00FF00;
    ion-title {
      background-color: #0000ff;
      a {
        font-size: 25px;
        color: #000;
      }
    }
  }
}
</style>

它与 "shadow dom" 我还没有完全理解的概念有关。此 DOM 页脚结构。

Answer 1

Ionic 4 使用 web components，所以 Ionic 提供的方法style components in Ionic 4 is to use the CSS variables。

在您的情况下，设置组件的 --background 属性：

ion-footer {
  --background: #ff0000;
}

Ionic 4 自定义样式阴影 DOM

Ionic 4 custom styling Shadow DOM

shadow-dom

ionic-framework

ionic-view

ionic4

ionic-vue