vue ,通过props接收,动态变量传入scss中,运用:css3(var)

运用demo: 一个header.vue组件,  组件内,改变了其他组件样式(/deep/方式), 背景色,字体颜色,
现在想通过父组件传值的方式统一管理,改变样式,

<!-- demo -->
<template>
  <!-- 父组件传参过来 根据css3  var函数 声明变量   -->
  <div class="pack" :style="{ '--bkColor': bkColor, '--fontColor': fontColor }">
    <el-card class="box-card">
      "列表内容 "
    </el-card>
  </div>
</template>

<script>
export default {
  name: "",
  props: {
    bkColor: {
      //背景色
      type: String,
      default: "transparent",
    },
    fontColor: {
      //字体颜色
      type: String,
      default: "#ffffff",
    },
  },
  data() {
    return {};
  },
};
</script>
<style scoped lang="scss">
.pack {
//注意style加了scoped 所以要改变引用组件的样式需要加/deep/
  /deep/ .el-card {
    // style上声明的变量
    background: var(--color);
  }
//当前组件class直接.即可
  .box-card {
    // style上声明的变量
    color: var(--fontColor);
  }
}
</style>