CSS Layer

A CSS layer is utilized in styled mode only, in unstyled mode the built-in CSS classes are not included and as a result no layer is defined. This documentation only applies to styled mode.

The @layer is a standard CSS feature to define cascade layers for a customizable order of precedence. If you need to become more familiar with layers, visit the documentation at MDN to begin with. In styled mode, PrimeReact wraps the built-in style classes under the primereact cascade layer to make the library styles easy to override. CSS in your app without a layer has the highest CSS specificity, so you'll be able to override styles regardless of the location or how strong a class is written.

For example, let's assume you need to remove the rounded borders of the InputSwitch component defined by the theme in use. In order to achieve this, .p-inputswitch .p-inputswitch-slider selector needs to be overriden. Without the layers, we'd have to write a stronger css or use !important however, with layers, this does not present an issue as your CSS can always override PrimeReact with a more straightforward class name such as my-switch-slider. Another advantage of this approach is that it does not force you to figure out the built-in class names of the components.

import React, { useState } from 'react';
import { InputSwitch } from 'primereact/inputswitch';

export function SpecificityDemo() {
    const [checked, setChecked] = useState(false);
    const css = `
        .my-switch-slider {
            border-radius: 0;
        }

        .my-switch-slider:before {
            border-radius: 0;
        }
    `;

    return (
        <div className="card">
            <InputSwitch
                checked={checked}
                onChange={(e) => setChecked(e.value)}
                pt={{
                    slider: {
                        className: 'my-switch-slider'
                    }
                }}
            />
            <style>{css}</style>
        </div>
    );
}
 

Layers also make it possible to use CSS Modules, view the CSS Modules guide for examples.

Ease of customization may present an issue if you have global styles on HTML elements like inputs and buttons that are also utilized by PrimeReact because global styles with a broader scope e.g. button and no layer always override the PrimeReact 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 reset and make sure primereact comes after your layer since layers defined after has higher precedence. This way, your Reset CSS does not get in the way of PrimeReact components.

/* Order */
@layer reset, primereact;

/* Reset CSS */
@layer reset {
    button,
    input {
        /* CSS to Reset */
    }
}
 

Compatibility between PrimeReact and CSS libraries.

Tailwind CSS includes a reset utility in base called preflight. If you are using this feature, wrap the base and utilities in separate layers and make sure primereact layer comes after the base.

@layer tailwind-base, primereact, tailwind-utilities;

@layer tailwind-base {
    @tailwind base;
}

@layer tailwind-utilities {
    @tailwind components;
    @tailwind utilities;
}
 

Bootstrap has a reboot utility to reset the CSS of the standard elements. If you are including this utility, you may give it a layer while importing it.

@layer bootstrap-reboot, primereact;

@import "bootstrap-reboot.css" layer(bootstrap-rebooot);
 

Normalize is another utility to reset CSS of the standard elements. While importing the CSS file, assign it to a layer and define the layer order with primereact coming after the normalized layer.

@layer normalize, primereact;

@import "normalize.css" layer(normalize-reset);