如何将样式 css 从父组件传递给子组件 vue

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>

什么是孩子的Vue？ 在我的 Child.Vue 组件中加载作用域样式 CSS。

Answer 1

您可以使用作用域 css 块中的深度选择器将 class 应用于组件的子组件。 查看文档

在您的情况下，SFC 的 css 部分将变成以下内容：

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