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:
html
<template>
<div class="container">
// inside CTA, it has a class name of .cta
<CTA />
</div>
</template> In sass or scss file:
css
.container {
:deep(.cta) {
margin: 0;
}
}
To use child selector:
css
.container {
:deep(.cta:first-child) {
margin: 0;
}
}