¿Cómo anulo el CSS predeterminado de PrimeFaces con estilos personalizados?

Román, miembro de este gran equipo, nos ha hecho el favor de escribir este enunciado porque controla a la perfección este tema.

Solución:

Hay varias cosas que debe tener en cuenta, de las cuales una o más podrían ser relevantes para su caso específico.

Carga tu CSS después PrimeFaces uno

Debe asegurarse de que su CSS esté cargado después el PrimeFaces uno. Puede lograr esto colocando el haciendo referencia a su archivo CSS dentro en lugar de :

    ...


    
    ...

JSF reubicará automáticamente la hoja de estilo en el final del HTML generado y esto asegurará que la hoja de estilo esté cargada después los estilos predeterminados de PrimeFaces. De esta manera, los selectores en su archivo CSS que son exactamente los mismos que en el archivo CSS de PrimeFaces tendrán prioridad sobre el de PrimeFaces.

Probablemente también verás sugerencias para ponerlo en de que es entendido por PrimeFaces-específico HeadRendererpero esto es innecesariamente torpe y se rompería cuando tengas tu propio HeadRenderer.

Comprender la especificidad de CSS

También debe asegurarse de que su selector de CSS esté por lo menos tan específico como el selector de CSS predeterminado de PrimeFaces en el elemento en particular. Debe comprender las reglas de especificidad y cascada y herencia de CSS. Por ejemplo, si PrimeFaces declara un estilo por defecto de la siguiente manera

.ui-foo .ui-bar 
    color: pink;

y lo declaras como

.ui-bar 
    color: purple;

y el elemento particular con class="ui-bar" sucede que tiene un elemento padre con class="ui-foo"¡entonces la de PrimeFaces seguirá teniendo prioridad porque es la coincidencia más específica!

Puede utilizar las herramientas de desarrollo del navegador web para encontrar el selector de CSS exacto. Haga clic derecho en el elemento en cuestión en el navegador web (IE9/Chrome/Firefox+Firebug) y elija Inspeccionar elemento para verlo.

Anulación parcial

Si necesita anular un estilo solo para una instancia específica del componente y no para todas las instancias del mismo componente, agregue un estilo personalizado. styleClass y engánchate a eso en su lugar. Es otro caso donde se usa/aplica la especificidad. Por ejemplo:

.ui-datatable.borderless tbody,
.ui-datatable.borderless th
.ui-datatable.borderless td 
    border-style: none;

Si un componente no es compatible con un styleClass y está en jsf 2.2 o superior, también puede usar passtrough attributes y agrega un pt:class y hacer que termine en la salida.

¡Nunca use !importante

En caso de que no cargue correctamente el archivo CSS en orden o no encuentre el selector CSS correcto, probablemente tomará el !important solución alterna. Esto es simplemente incorrecto. Es una solución fea y no una solución real. Solo confunde tus reglas de estilo y a ti mismo más a largo plazo. los !important deberían solamente usarse para anular los valores codificados en los elementos HTML style attribute desde un archivo de hoja de estilo CSS (que a su vez también es una mala práctica, pero en algunos casos raros, lamentablemente, inevitable).

Ver también:

• ¿Cómo hacer referencia a CSS/JS/recurso de imagen en la plantilla de Facelets?
• Red de desarrolladores de Mozilla > CSS > Especificidad (excelente artículo, ¡debe leerse!)
• Comprensión de la precedencia de estilos en CSS: especificidad, herencia y la cascada

puede crear un nuevo archivo css, por ejemplo, cssOverrides.css

y coloque todas las anulaciones que desee dentro de él, de esa manera, la actualización de la versión de Primefaces no lo afectará,

y en tu h:head agrega algo asi

si no funciona, intente agregarlo al cuerpo h:

para verificar si funciona, pruebe este simple ejemplo dentro del archivo css

.ui-widget 
   font-size: 90% !important;

esto reducirá el tamaño de todos los componentes/texto de las caras principales

Estoy usando PrimeFaces 6.0. Aquí hay alguna información que me hubiera gustado tener con respecto a esto:

Si utiliza funcionará, pero su CSS no se cargará en último lugar, incluso si es el último en el etiquetas (otros archivos CSS se incluirán después). Un truco que puedes hacer que aprendí aquí es colocarlo dentro , que debe ir dentro del cuerpoal igual que:

  
    
  
...

Entonces su CSS será el último cargado. Nota: aún tendrá que cumplir con las reglas de especificidad como se describe en BalusC.

Coloqué “MyCSS.css” en WebContent/resources/css/.

Más información sobre el orden de carga de recursos: http://www.mkyong.com/jsf2/primefaces/resource-ordering-in-primefaces

Te mostramos las comentarios y valoraciones de los usuarios

Al final de todo puedes encontrar los comentarios de otros creadores, tú además tienes la habilidad insertar el tuyo si dominas el tema.

---

---

Utiliza Nuestro Buscador