Currently delving into the world of Vue.js, I've discovered that styling child components is achieved by referencing classes, ids, and tags defined in the component's template. Let's take a look at the App.vue component as an example:
<style lang="css" scoped>
.app__wrapper {
width: 90vmin;
height: 90vmin;
border-radius: 20px;
background-color: #eee;
}
</style>
<template>
<MainHeader class="app__header" />
<ContentWrapper class="app__content-wrapper" />
<MainFooter class="app__footer" />
</template>
I'm now wondering how to apply styles directly to the App component itself. I experimented with two methods, but unfortunately, neither seemed to work:
<!-- App.vue -->
<style lang="css" scoped>
App {
background-color: #ccc;
}
.page__app {
background-color: #ccc;
}
</style>
Although I searched for similar queries on StackOverflow, I only found discussions related to different web frameworks.
Thank you in advance :) Wishing you a fantastic week!