Sometimes, we want to override scoped styles in Vue.js components.
In this article, we’ll look at how to override scoped styles in Vue.js components.
How to override scoped styles in Vue.js components?
To override scoped styles in Vue.js components, we add more specificity to the selector for the element with the styles we want to override.
For instance, we write
<template>
<div class="wrapper">
<comp-b>...</comp-b>
</div>
</template>
<script>
import CompB from "@/.../CompB";
export default {
components: {
CompB,
},
};
</script>
<style>
.wrapper .compb-header {
color: red;
}
</style>
to set the element with class compb-header inside the element with class wrapper‘s color to red.
Conclusion
To override scoped styles in Vue.js components, we add more specificity to the selector for the element with the styles we want to override.
