githubEdit

🦺Class names type safety

It's like clsxarrow-up-right 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

Was this helpful?