I am using PrimeVue and having problem applying style on components using <style scoped>
.
I managed to reduce to this minimal code (unfortunately I didn't find any cdn for icons, so I cannot create a code snippet):
<template>
<div id="uppermenu">
<Button icon="pi pi-bell" aria-label="Save" outlined/>
</div>
</template>
<script setup lang="ts">
import OverlayBadge from 'primevue/overlaybadge';
</script>
<style scoped>
#uppermenu {
height: 65px;
background-color: #041e14;
text-align: right;
padding-top: 6px;
padding-right: 35px;
}
/* This style is applied WITH and WITHOUT 'scoped' tag */
#uppermenu button {
border: 2px solid red !important;
margin-left: 20px;
}
/* This style is applied ONLY when removing 'scoped' tag */
#uppermenu button.p-button span.pi {
font-size: 28px !important;
color: red !important;
}
</style>
This is the result WITH scoped
attribute:
and this is the result WITHOUT scoped
attribute:
When I inspect the button WITH the scoped
attribute I see this in the styles console:
#uppermenu button[data-v-50a6ef91] {
border: 2px solid red !important;
margin-left: 20px;
}
And this is the html generated:
<button data-v-50a6ef91="" class="p-button p-component p-button-icon-only p-button-outlined" type="button" aria-label="Save" data-pc-name="button" data-p-disabled="false" data-pc-section="root" pc1="">
<span class="p-button-icon pi pi-bell" data-pc-section="icon"></span><span class="p-button-label" data-pc-section="label"> </span>
</button>
As you can see, the data-v-50a6ef91
attribute exists only on <button>
.
How can I keep using scoped
and apply style on inner html elements?
As @RoToRa commented, the solution I found most precise is to use deep selectors.
In my case:
#uppermenu button.p-button :deep(span.pi) {
font-size: 28px !important;
color: red !important;
}
From documentation:
If you want a selector in scoped styles to be "deep", i.e. affecting child components, you can use the :deep() pseudo-class.