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
  • Customization
  • Creating a custom component

Was this helpful?

Edit on GitHub
Export as PDF

Components

PreviousColorsNextIcons

Last updated 1 year ago

Was this helpful?

The components are documented individually on a separate website.

Customization

What to do if you want to customize the components beyond what the props allow.

The classes property

Every component of react-dsfr accepts an optional classes property that enables you to customize their look at a fine grained level.

Creating a custom component

🧩
react-dsfr components
Cusomizing a component - NOTE: theme.decisions... is now fr.colors.decisions...
Available classes on the Alert components
We add a 5v margin-top to the close button
Before
After
Logo