Vue - The Road to Enterprise/

...

/

Styling Child Components

Styling Child Components

Learn how to style the child 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:

Press + to interact
<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.

Press + to interact
<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:

Press + to interact
<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 ...