[![Cover](https://fqjltiegiezfetthbags.supabase.co/storage/v1/object/public/common.images/npm/primereact-npm.jpg)](https://primereact.dev)

# @primereact/styles

The style layer behind `@primereact/ui`. One module per component, mapping props and state to `.p-` class names and to the CSS the active PrimeUIX preset resolves at runtime.

Direct installation is rarely needed, since `@primereact/ui` already includes it. Install it to apply PrimeReact styling to a custom component, or to build a styled layer on top of the `primereact` primitives.

```bash
npm install @primereact/styles
```

## Usage

Each component's style module is exported from its own subpath, and every primitive accepts a `styles` prop. Passing the module in produces the same result `@primereact/ui` gives.

```tsx
import { styles } from '@primereact/styles/button';
import { Button } from 'primereact/button';

<Button styles={styles} severity="danger" variant="outlined">
    Delete
</Button>;
```

## How it works

Styles are JavaScript objects rather than static CSS. Class names are computed from props and state through `createStyles`, then resolved at render time by `cx()`. A button with `severity="danger"` and `variant="outlined"` picks up the right combination without manual toggling. Its counterpart `sx()` does the same for inline styles. In unstyled mode `cx()` returns `undefined`, which is how a single flag strips every PrimeReact class.

The CSS itself carries `dt('token.path')` references that the `@primeuix/styled` runtime resolves against the active preset. Swapping the preset therefore re-themes every component at once. Pass Through hooks into the same layer: classes and attributes can be overridden per element without touching a style module.

## Documentation

- [Theming](https://primereact.dev/docs/styled/guides/theming/styled)
- [Unstyled mode & Pass Through](https://primereact.dev/docs/styled/guides/theming/unstyled)
- [MCP server](https://www.npmjs.com/package/@primereact/mcp)

## License

Licensed under the [PrimeUI License](https://primeui.dev/licenses) - Copyright (c) [PrimeTek Informatics](https://www.primetek.com.tr)