Overriding Child Component Styles — 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 >>> .child-component {
  font-size: 24px;
}
</style>

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

Note: If you're using a CSS pre-processor like SCSS, you may need to use /deep/ instead.