MUI React SSR issues

Question

MUI React SSR issues

Demandé el 1 de Février, 2021: Quand la question a-t-elle été
107 affichage: Nombre de visites la question a
1 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Nous mettons en place le Server Side Rendering pour un projet existant en utilisant React-MUI. Tout fonctionne, sauf le style. Aucun de nos CSS ne se charge pour le rendu côté serveur. N'importe quel CSS en ligne fonctionne bien, mais n'importe quelle feuille définie au début du fichier, et liée avec la commande export default withStyles(styles)(Page) ne fonctionnent pas.

Notre style est défini comme suit :

const styles = (theme) => ({ 
    root{
        //some CSS Here ...
    }...
});

qui est ensuite lié à des accessoires de coulée avec

export default typeof window !== 'undefined'
    ? withRouter(connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(Home)))
    : withStyles(styles)(Home);

et on y accède avec

const {classes} = this.props;
//then in render
<div className={classes.root}>...</div>

Aucun des classes.someClassName CSS fonctionne dans le rendu côté serveur, mais dès que nous effectuons le rendu dans le navigateur, il fonctionne normalement. Les idées actuelles sont d'essayer d'utiliser un <ThemeProvider/> de MUI, mais tout conseil est le bienvenu.

Merci de votre attention !

Demandé el 1 de Février, 2021 par Carter

Answer 1

1 Réponses

Answer 2

3voto

Carter Points 31

Merci à @ReedDunkle pour ses conseils. J'ai fini par le faire fonctionner en utilisant son [guide lié][1] comme référence. Je n'ai finalement eu besoin que d'ajouter sheets.collect(...) ainsi que css = sheets.toString() et d'inclure le CSS dans l'en-tête du document HTML. Il n'est pas nécessaire d'utiliser le fichier ThemeProvider Tout s'est bien enchaîné grâce à l'utilisation de WithStyles ahora.

En gros, cela ressemble à ce qui suit :

const html = renderToString(sheets.collect(<App/>));

const css = sheets.toString();

//...
//In your SSR HTML

<head>
<style id="jss-server-side">${css}</style>
...
</head>
...
<div id=react-root>{html}</div>

  [1]: https://material-ui.com/guides/server-rendering/#handling-the-request

Répondu el 2 de Février, 2021 par Carter (31 Points )

MUI React SSR issues

Réponse

Questions en vedette

Top Tags

Prograide.com

Powered by:

MUI React SSR issues

Réponse

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: