Search⌘ K
Home
Courses
Vue - The Road to Enterprise

Styling Child Components

Explore methods to style child components in Vue applications while maintaining encapsulation. Understand how to use scoped styles, the ::v-deep selector, and CSS modules to override or compose styles safely. Learn how these approaches prevent style leakage and ensure clear styling APIs for reusable components.

We'll cover the following...

How to style child components?

It’s a good idea to keep our components encapsulated, so their logic and styles do not affect any other components in an application. However, sometimes there are cases where we do want to style or override the styles of a child component, whether it’s a third-party component or our reusable component. Imagine we have these two components:

HTML
<template>
	<div class="parent-container">
		<Child />
	</div>
</template>
<script>
	import Child from "./Child";
export default {
	components: { Child },
};
</script>

Let’s have a look at the Child component.

HTML
<template>
	<div class="child-container">
		<div class="child-content">
			Child
		</div>
	</div>
</template>
<script>
	export default {};
</script>

We might want to change background colour of the <div class="child- content"> element from the Parent. One way to do it would be to just add a style like this in the Parent:

NAME_
CSS
<style> 
.child-content 
{
  background-color: lightblue; 
}
</style>

The problem with this approach is that this style will affect elements with class child-content everywhere in our application. That’s problematic, and this isn’t something we want. We could technically go with this approach and use some naming convention like BEMIt stands for Block Element Modifier and is used for the naming convention. It makes front-end code easy to read., but the style is still leaking out of the component. Fortunately, there are ways to handle it. The ...