Question

我有一个在不同地方使用的组件，但一次需要更改链接的颜色。我尝试了以下操作，但这不是我的工作。

组件

<section class="contact__info">
    <div class="details">{{days}}</div>
    <div>
        <a :href="'telephone'">
            <strong>{{telephone}}</strong> 
        </a>
    </div>
</section>

<style lang="scss">
.contact__info{
   a {
     color: grey;
     font-weight: bolder
   }
}
</style>

我在页面中以如下方式调用它，该页面需要更改该组件中anchor的颜色，并且无法正常工作，如下所示：

<CallWidget 
  :class="{anchor : isFooter}"
  title="Call Us:" 
  days="Mon - Fri" 
  telephone="0123"
/>

<script>
  export default {
    data(){
      return{
        isFooter: true
      }
    },
  };
</script>

<style lang="scss" scoped>
  .anchor {
    a {
      color: white;
    }
  }
</style>

Answer 1

如果class在子组件内部，则需要在类之前添加/deep/或>>>，以告知Vue检查子组件内部。

<style lang="scss" scoped>
  /deep/ .anchor {
    a {
      color: white;
    }
  }
</style>

看看https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors

使用类绑定更改组件元素的颜色

1 个答案: