更改使用插槽生成的子组件的样式

Question

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

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

VuePrime 为该组件的某些元素指定了 class 个名称，例如：.p-card-content 或 .p-card-footer。所以基本上我正在做的是：从父组件我使用 p-card-content 删除它默认具有的填充，但我没有看到浏览器中应用的样式...

这是 SFC：

<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>

这里是 docs for this Component

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>

demo

更改使用插槽生成的子组件的样式

Changing styles of a child component that is generated with slots

vue.js

primevue

vuejs3