🦺Class names type safety

It's like clsx but you can only pass it classes that are from the dsfr.

You can't apply your custom classes using fr.cx(), you'll get type error, but you can combine a regular cx() or clsx() function and fr.cx(). Example:

import { useStyles } from "tss-react/dsfr";
import { fr } from "@codegouvfr/react-dsfr";  

type Params = {
    className?: string;
};

export function MyComponent(params: Params){

   const { className= params;  
   
   const { cx } = useStyles();
   
   return (
       <div className={cx(fr.cx("fr-p-10v"), className)}>
           //...
       </div>
   );

}

Last updated

Logo

2022-2023 Pôle logiciel libre d'Etalab - MIT license