Después de crear el contexto ThemeSetting.tsx, no puedo usar <Button><Button> y todas las cosas que usan el theme de materialUI ReactJS, Typescript
TypeError: no se pueden leer las propiedades de push../node_modules/@mui/material/Button/Button.js.Object.ownerState.ownerState node_modules/@mui/material/Button/Button.js:67
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({y 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>; };Me encontré con esto yo mismo. Puede importar createTheme desde @mui/material/styles o @mui/system , pero hacen cosas ligeramente diferentes :
Puede usar la utilidad que viene del paquete
@mui/system, o si está usando@mui/material, puede importarla desde@mui/material/styles. La diferencia está en elthemepredeterminado que se usa (si no hay ningún tema disponible en el contexto de React).
El de @mui/material/styles es lo suficientemente inteligente como para llenar los espacios en el tema activo del tema MUI predeterminado. Entonces, si está usando @mui/material , use @mui/material/styles .