StyleClass

StyleClass manages css classes declaratively to during enter/leave animations or just to toggle classes on an element.

Import#


import { StyleClass } from 'primereact/styleclass';

Toggle Class#

StyleClass is bind to the element that triggers the click event with the nodeRef property that points to the ref of the element. The target element to change the styling is defined with the selector property that accepts any valid CSS selector or keywords including @next, prev, parent, grandparent


<StyleClass nodeRef={toggleBtnRef} selector="@next" toggleClassName="p-disabled" />
<Button ref={toggleBtnRef} label="Toggle p-disabled" />
<InputText />

Animation#

Classes to apply during enter and leave animations are specified using the enterClassName, enterActiveClassName, enterToClassName, leaveClassName, leaveActiveClassName,leaveToClassName properties. In addition in case the target is an overlay, hideOnOutsideClick would be handy to hide the target if outside of the popup is clicked.


<StyleClass nodeRef={openBtnRef} selector=".box" enterClassName="hidden" enterActiveClassName="fadein">
    <Button ref={openBtnRef} label="Show" className="mr-2" />
</StyleClass>

<StyleClass nodeRef={closeBtnRef} selector=".box" leaveActiveClassName="fadeout" leaveToClassName="hidden">
    <Button ref={closeBtnRef} severity="secondary" label="Hide" />
</StyleClass>

<div className="hidden animation-duration-500 box">
    <div className="flex bg-green-500 text-white align-items-center justify-content-center py-3 border-round-md mt-3 font-bold shadow-2 w-8rem h-8rem">Content</div>
</div>