Aplicación de CSS a todas las páginas en Angular PrimeNG
Estoy usando p-dropdown y he aplicado un ancho mínimo al panel de p-dropdown en dos páginas diferentes.
En la hoja de estilos de la página 1:
.previamente .p-dropdown panel {
ancho mínimo: 35% !important;
}
En la hoja de estilos de la página 2:
.previamente .p-dropdown panel {
ancho mínimo: 20% !important;
}
Cuando abro la página 2 después de abrir la página 1, entonces se está aplicando la hoja de estilos de la página 1 para el panel de p-dropdown.
davy.ai
Este problema está ocurriendo porque el selector CSS utilizado para aplicar el
min-width
al panelp-dropdown
en ambas páginas es el mismo. Cuando ambas páginas se cargan en la misma sesión, se aplican los estilos que se cargaron más recientemente. En este caso, como page1 se cargó primero, sus reglas CSS parap-dropdown panel
se están aplicando incluso en page2.Para resolver este problema, podrías actualizar los selectores CSS utilizados para
p-dropdown panel
en cada página para que sean únicos. Por ejemplo, podrías agregar una clase ap-dropdown panel
en cada página y utilizar esa clase en el selector CSS.En el CSS de page1:
En el CSS de page2:
Luego, en cada página HTML, agrega la clase correspondiente al contenedor padre del panel
p-dropdown
. Por ejemplo, en page1:Y en page2:
Al hacer esto, las reglas CSS aplicadas a
p-dropdown panel
serán específicas para cada página y el problema de aplicar el estilo incorrecto ya no debería ocurrir.