Recently, I began my journey with ionic vue and started incorporating CSS with the components. I added styles in the same file like this:
<style scoped>
.abc {
background-color: blue;
}
</style>
I attempted to apply these styles by using the following code:
<ion-content class ="abc">
<ion-header>
<ion-toolbar>
<ion-title size="large">My Navigation Bar</ion-title>
</ion-toolbar>
</ion-header>
</ion-content>
Unfortunately, it didn't work as expected. How can I resolve this issue? Here is my complete code:
<template>
<ion-page>
<ion-content class ="abc">
<ion-header>
<ion-toolbar>
<ion-title size="large">My Navigation Bar</ion-title>
</ion-toolbar>
</ion-header>
</ion-content>
</ion-page>
</template>
<script>
import { IonContent, IonPage } from "@ionic/vue";
import { defineComponent } from "vue";
export default defineComponent({
name: "Home",
components: {
IonContent,
IonPage
},
});
</script>
<style scoped>
.abc {
background-color: blue;
}
</style>