How to style child component from parent in Nuxt

Child component styling in Nuxt

To style a child component from it's parent in Nuxt , use :deep(.child-class){}:

Example template:

                                <template>
  <div class="container">
    // inside CTA, it has a class name of .cta
    <CTA />
  </div>
</template>
                            

In sass or scss file:

                                
                                        .container {
  :deep(.cta) {
    margin: 0;
  }
}
                                    
                            

To use child selector:

                                
                                        .container {
  :deep(.cta:first-child) {
    margin: 0;
  }
}
                                    
                            

Tags: Nuxt