Comment intégrer les composants de style Nextjs + avec Material-UI

Question

1. Pour créer une application next.js en utilisant des composants stylisés, c'est vraiment facile. Il vous suffit d'utiliser leur _document.js extrait pour activer la SSR et empêcher le scintillement des styles lors du chargement de la page: https://github.com/zeit/next.js/blob/canary/examples/with-styled-components/pages/_document.js

2. Construire une application next.js en utilisant material-ui est presque aussi simple. Il vous suffit de commencer avec la base du projet: https://github.com/mui-org/material-ui/tree/master/examples/nextjs , qui a sa propre implémentation sur _document.js: https://github.com/mui-org/material-ui/blob/master/examples/nextjs/pages/_document.js

3. Malheureusement, je n'ai pas pu comprendre comment "fusionner" les deux implémentations et obtenir une application suivante où les composants de style et les composants de l'interface utilisateur peut coexister, SSR et ne scintille pas au chargement de la page.

Pouvez-vous m'aider? Y a-t-il quelqu'un sur Internet avec de meilleures capacités que le mien qui a déjà résolu ce problème mais je ne sais pas?

Merci d'avance.

Answer 1

Cette solution fonctionne bien pour le côté serveur, pour le côté client, vous devez également modifier l'ordre d'injection, comme indiqué ici: https://material-ui.com/customization/css-in-js/#css- ordre d'injection

Pour que cela fonctionne avec next.js, vous devez changer l'attribution de la constante jss comme ceci:

const jss = create({
  ...jssPreset(),
  insertionPoint: process.browser
    ? window.document.getElementById('jss-insertion-point')
    : null
})