Changing styles of a child component that is generated with slots

Question

I'm facing a SASS problem with a component that comes from PrimeVue(version 3.5.0). I'm using a component called Card, It requires a couple of slots for different sections of the card (header, content, footer).

So far so good, the problem is that I want to change the style of an element that is rendered by this Card from the parent component.

VuePrime gives class names to certain elements of this component, like: .p-card-content or .p-card-footer. So basically what I'm doing is: from the parent component I use p-card-content for removing a padding that It has by default, but I don't see that style applied in the browser...

Here goes the 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>

and here is the docs for this Component

Answer 1

With SCSS, you can can use Vue's ::v-deep to target the .p-card-content:

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

demo