Overriding styles of a child component — the right way

Scoped CSS is fantastic for keeping things tidy and not accidentally bleeding styles into other parts of your app.

But sometimes, you need to override the styles of a child component and break out of that scope.

Vue has a :deep selector just for this:

<style scoped>
/* Override CSS of a child component
   while keeping styles scoped */
.my-component :deep(.child-component) {
  font-size: 24px;
}
</style>

In Vue 2 this has a slightly different syntax depending on which CSS pre-processor you're using:

<style scoped>
/* When using SASS */
.my-component ::v-deep .child-component {
  font-size: 24px;
}

/* Everything else */
.my-component >>> .child-component {
  font-size: 24px;
}
</style>

Yes, I have previously covered why you shouldn't do this, but overriding styles can be the best solution (we don't believe in "best practices" here).