I am trying to modify the parent component's style without affecting the CSS of other components. Here is an example from my code:
App.vue
<div class="page-content">
<router-view ref="routeview"></router-view>
</div>
router/index.js
routes: [
{ path: '/home', name: 'Home', component: HomeView },
{ path: '/heroes', name: 'Heroes', component: HeroesView },
]
HomeView
<style>
.page-content {
background-color: red;
}
</style>
<style scoped>
</style>
If I include the .page-content CSS in the global CSS area as shown above, it also affects the styling of HerosView. This is not my intention - I only want to change the background of the .page-content under the current HomeView page.
Is there a way to achieve this? Can I isolate the style changes to specific components?