react-dsfr
GitHubComponentsPlayground
  • πŸ”§Initial setup
  • πŸ”€Integration with routing libs
  • 🦺Class names type safety
  • 🎨Colors
  • 🧩Components
  • β˜‘οΈIcons
  • πŸ’…CSS in JS
  • 🌎Internationalization
  • πŸŒ…Importing assets
  • 🀝MUI integration
  • πŸ•ŠοΈCustom Branding
  • πŸ“–Storybook
  • πŸ“ŠAnalytics
  • πŸ”’Content-Security-Policy
  • πŸ“¦Publishing a NPM modules that depends on react-dsfr
  • πŸ’ŸContributing
Powered by GitBook
LogoLogo

Links

  • GitHub
  • Playground
  • Components

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

On this page

Was this helpful?

Edit on GitHub
Export as PDF

Class names type safety

PreviousIntegration with routing libsNextColors

Last updated 1 year ago

Was this helpful?

It's like 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>
   );

}
🦺
clsx