Ionic 4自定义样式Shadow DOM [英] Ionic 4 custom styling Shadow DOM

问题描述

曾经尝试更改页脚背景，但我做对了.每个标签都有一种颜色，但是只有最后一个标签被更改(蓝色-#0000ff).如何在Ionic 4中进行样式设置?

Been trying to change footer background but I cant get it right. I have a color for each tag but only the last tag is changed (blue - #0000ff) . How does one do styling in 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>

这与影子dom"概念有关，我还没有完全了解它.页脚的此DOM结构.

It has something to do with "shadow dom" concept which I dont fully undersrtand yet . This DOM structure for the footer.

推荐答案

Ionic 4使用Web组件，因此样式组件将使用

Ionic 4 uses web components, so the way to style components in Ionic 4 is to use the CSS variables that Ionic provides.

根据您的情况，设置组件的-background 属性:

In your case, set the --background property of the component:

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

这篇关于Ionic 4自定义样式Shadow DOM的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！