Vue修改Element-UI默认样式

使用 /deep/ 伪元素选择器。它是一种深度组合选择器，用于穿透组件的样式封装，从而选择组件内部嵌套的元素。

原组件库中 el-page-header 实现效果如下所示：

现在修改其背景及文字颜色如下所示：

<template>
  <!-- 页头 -->
  <el-page-header
    @back="goBack"
    content="商户入驻"
    class="header"
  ></el-page-header>
</template>

<script>
export default {
  methods: {
    goBack() {
      this.$router.back();
    },
  },
};
</script>

<style scoped>
.header {
  color: #ffffff;
  background-color: #409eff;
}

.header /deep/ .el-page-header__content {
  color: #ffffff;
}
</style>

其中 .el-page-header__content 通过打开开发者工具（F12）查看可知：