vue.js - 更改使用插槽生成的子组件的样式

Question

我面临来自 PrimeVue（版本 3.5.0）的组件的 SASS 问题。我正在使用一个名为 Card 的组件，它需要几个插槽用于卡片的不同部分（页眉、内容、页脚）。

到目前为止一切顺利，问题是我想从父组件更改此 Card 呈现的元素的样式。

VuePrime 为该组件的某些元素赋予类名，例如：.p-card-content或.p-card-footer. 所以基本上我正在做的是：从我p-card-content用来删除默认情况下的填充的父组件中，但我没有看到在浏览器中应用的样式......

证监会：

<template>
  <div class="login-container p-jc-center p-ai-center">
      <div class="login-background">

      </div>
      <div class="login-credentials">
            <Card>
              <template #title>
                <div>Ingresar al sistema Amigo Fiel</div>
              </template>
              <template #content>
                <Message>Welcome to PrimeVue</Message>
              </template>
            </Card>
            
      </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
    }
  }
}
</script>

<style lang="scss" scoped>
.p-card .p-card-content {
  // here is the style that I want to set
  padding: 0 !important;
}
</style>

这是此组件的文档

标签： vue.jsvuejs3primevue

Answer 1

使用 SCSS，您可以使用 Vue::v-deep来定位.p-card-content：

<style lang="scss" scoped>
.login-container::v-deep .p-card .p-card-content {
  padding: 0 !important;
}
</style>

演示