How to use with css and styled apis.

[avin-kavish]

I want a solution that works with app dir (client components only but without FOUC), but I want to use the css and styled apis. Is it possible with this library?

[garronej]

Hello @avin-kavish,

First and foremost, I must inform you that this design system is intended solely for building websites for the French public service. Although the code for this toolkit is under the MIT license, the underlying design system is not free to use.

Nevertheless, I'll address your question for future reference:

We offer comprehensive support for CSS-in-JS, supplying all the necessary tooling for color management, spacing, and media queries.
A demo is set up with Next Page Router enabled, along with Emotion SSR. You have the option to use the styled API or any other Emotion API.
Additionally, every component includes a classes prop, similar to MUI, that allows you to apply custom classes to sub-elements of the built-in components.

CSS-in-JS: Documentation https://react-dsfr.codegouv.studio/css-in-js
Demo Next App Router with Emotion SSR + MUI pre-configured: https://github.com/garronej/react-dsfr-next-appdir-demo
Component mount points: https://react-dsfr.codegouv.studio/components
Best regards,