vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-10 17:32:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

Theming doc updates

Browse source
This commit is contained in:
Cagatay Civici 2024-12-08 00:18:08 +03:00
parent 18367429f6
commit fbc12930b1
8 changed files with 48 additions and 101 deletions
Download patch file Download diff file Expand all files Collapse all files

5
apps/showcase/doc/theming/styled/csslayer/ResetDoc.vue
View file

@ -1,9 +1,8 @@
<template>
<DocSectionText v-bind="$attrs">
<p>
Ease of customization may present an issue if you have global styles on HTML elements like inputs and buttons that are also utilized by PrimeVue because global styles with a broader scope e.g. <i>button { }</i> and no layer always
override the PrimeVue components leading to unexpected results. A common use case for global styles applying to standard HTML elements is CSS reset utilities to remove the default styling of the browsers. In this case, best practice is
wrapping your CSS in a layer like <i>reset</i> and make sure <i>primevue</i> comes after your layer since layers defined after has higher precedence. This way, your Reset CSS does not get in the way of PrimeVue components.
In case PrimeVue components have visual issues in your application, a Reset CSS may be the culprit. CSS layers would be an efficient solution that involves enabling the PrimeVue layer, wrapping the Reset CSS in another layer and defining
the layer order. This way, your Reset CSS does not get in the way of PrimeVue components.
</p>
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</DocSectionText>