Search code examples
primereact

PrimeReact: Semantic colors in CheckBox or custom components


I would like to be able to use the colors PrimeReact is using for info, warning, error etc.

In my custom components, how would I reference those colors, via CSS or classes.

To be more precise, I am looking to change the color of a checkbox from primary to warning. I know I can set it the hex value, or even --var of some yellow color. But I want it to be the 'warning' color so when switching themes, the color is updated appropriately.

Does PrimeReact even support this kind of thing?

Any guidance would be appreciated.


Solution

  • Not currently no.

    Actually a nice feature suggestion on PrimeReact GitHub would be to expose the info, warning, and error colors as CSS vars so you could do something like...

    color: var(--warning-color)
    

    or something like that.