Html Question posted in
Some basic documentation can be found here.

Html – Vue styling problems using scoped style

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:
Result WITH scoped attribute

and this is the result WITHOUT scoped attribute:
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">&nbsp;</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?

Tags:

2

Answers


  1. 0

    I try this and it works:

    
<Button
  :pt="{
    root: {style: { color: 'red'}},
    icon: {style: {'font-size': '28px', color: 'red'}}
  }"
  icon="pi pi-bell"
  aria-label="Save"
  outlined 
/>

    primevue version must be equal or greater than:
    primevue version

    The result:
    The result

    And style tag:
    < style scoped >

    Best Wishes!

    PS:
    Playground => https://stackblitz.com/edit/vitejs-vite-k77sl5?file=src%2FApp.vue

    Login or Signup to reply.
  2. 0

    Please check the SFC CSS features in the official docs, which describe what scope actually means, how it works, and how to style inside children: https://vuejs.org/api/sfc-css-features.html

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search