如何在Vue中将父组件的CSS样式传递给子组件

Question

我的父亲：

<template>
   <div> 
     <p class="my-class">Hello world.</p>
     <Child/>
 </div>
<template>

import Child from "@/components/Child.vue";

<style scoped>
  .my-class{
    font-size: 18px;
  }
</style>

在我的Child.Vue组件中加载作用域样式CSS，该如何使用子Vue?

- Pranto Roy

---

你尝试过在 Child 中添加 class="my-class" 吗？ 接下来会发生令人惊讶的事情:p - Jaromanda X

通过从样式定义中删除“scoped”，则该类变为全局，可以在任何地方使用，而不仅仅是其子元素。 - Raeisi

Answer 1

您可以在scoped css块中使用深度选择器将类应用于组件的子组件。 请参见文档。 在您的情况下，SFC的css部分将变成以下内容：

<style scoped>
::v-deep(.my-class) {
  font-size: 18px;
}
</style>

- maybebot