MaterialUI 5 : TypeError : Impossible de lire les propriétés de undefined (lecture de 'create')

Après avoir créé le contexte ThemeSetting.tsx, je ne peux pas utiliser
<Button><Button> et tout ce qui utilise themematerialUI ReactJS, Typescript

Erreur

TypeError : impossible de lire les propriétés de push indéfini (lecture "créer").

 64 | minWidth: 64,
65 | padding: '6px 16px',
66 | borderRadius: theme.shape.borderRadius,
> 67 | transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], {
| ^ 68 | duration: theme.transitions.duration.short
69 | }),
70 | '&:hover': _extends({

et ThemeSetting.tsx

import { createTheme, ThemeProvider } from "@mui/system";
export const ThemeContextProvider: React.FC<{}> = ({ children }) => {
const theme = createTheme({
palette: {
navbar: blue[100],
tag: {
red: red[200],
pink: pink[200],
purple: purple[200],
blue: blue[200],
green: green[200],
},
},
typography: {
fontFamily: [
"NotoSans",
"NotoSansThai",
"Arial",
"Roboto",
"'Helvetica Neue'",
"sans-serif",
].join(","),
},
shape: {
borderRadius: 15,
},
});
return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
};


Solution du problème

Je viens de tomber dessus moi-même. Vous pouvez importer createThemedepuis @mui/material/stylesou @mui/system, mais ils font des choses légèrement différentes:

Vous pouvez utiliser l'utilitaire provenant du @mui/systempackage ou, si vous utilisez @mui/material, vous pouvez l'importer depuis @mui/material/styles. La différence réside dans la valeur par défaut themeutilisée (si aucun thème n'est disponible dans le contexte React).

Celui de @mui/material/stylesest suffisamment intelligent pour combler les lacunes du thème actif à partir du thème MUI par défaut. Donc, si vous utilisez @mui/material, utilisez @mui/material/styles.

Commentaires

Posts les plus consultés de ce blog

La fonction GCP Cloud pour écrire des données dans BigQuery s'exécute avec succès, mais les données n'apparaissent pas dans la table BigQuery

Erreur Symfony : "Une exception a été levée lors du rendu d'un modèle"

Le shell POSIX (sh) redirige stderr vers stdout et capture stderr et stdout dans des variables