🤝
MUI integration
Use MUI components in your App or DSFRify your website build with MUI.
react-dsfr features a DSFR theme for MUI. This enables you to use the large library of MUI components in your website, they will blend in nicely.
First of all you'll have to remove all usage of
<ThemeProvider /> and createTheme() from your codebase (if any) then implement the following approach:import MuiDsfrThemeProvider from "@codegouvfr/react-dsfr/mui";
function App() {
return (
<MuiDsfrThemeProvider>
{/* your app ... */}
</MuiDsfrThemeProvider>
);
}
In this example we have augmented the MUI theme so it was possible to call
theme.custom.isDarkModeEnabled.import { createMuiDsfrThemeProvider } from "@codegouvfr/react-dsfr/mui";
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import type { Theme } from "@mui/material/styles";
declare module "@mui/material/styles" {
interface Theme {
custom: {
isDarkModeEnabled: boolean;
}
}
}
const { MuiDsfrThemeProvider } = createMuiDsfrThemeProvider({
"augmentMuiTheme": ({ nonAugmentedMuiTheme, frColorTheme }) => ({
...nonAugmentedMuiTheme,
"custom": {
"isDarkModeEnabled": frColorTheme.isDark
}
})
});
function App() {
return (
<MuiDsfrThemeProvider>
{/* your app ... */}
</MuiDsfrThemeProvider>
);
}
In Next.js setup, on initial page load you may experience a few frames where MUI components aren't aware that the dark mode is enabled.
Mui thinks we are in light mode
After idratation it switches to dark mode
You can eradicate theses few frames on subsequent page load by telling Next.js to perform SSR in the correct color scheme for the user:
_app.tsx
const { withDsfr, dsfrDocumentApi } = createNextDsfrIntegrationApi({
defaultColorScheme: 'system',
doPersistDarkModePreferenceWithCookie: true
});
Be aware: this will opt you out from Automatic Static Optimization, every hit of your website will trigger a complete render on the backend, so it probably isn't worth it unless you have already opted out from static optimization.
Be aware that the API have changed since this video was recorded.
GitHub - garronej/react-dsfr-next-demo: Demo of no white flash when reloading in SSR
GitHub
Reference Next.js setup
Last modified 1mo ago