reactjs - Upgrading to MUI 5 with styled components issues - Stack Overflow

admin管理员组

文章数量:1334908

My main issue after upgrading is that default styles part of MUI doesn't seem to get applied.

Here is a button in devtools. It has the MuiButtonBase-root and random style names (DPUOvl). It is missing the normal MuiButton styles in v4.

I am still sticking with styled components for this upgrade, but this issue is on the normal MUI components, so I'm not sure where I went wrong (with the default theme maybe?)

Here is my setup: Main app:

import {
  createTheme,
  ThemeProvider,
  StyledEngineProvider,
  adaptV4Theme
} from "@mui/material/styles";

declare module "@mui/styles/defaultTheme" {
  // eslint-disable-next-line @typescript-eslint/no-empty-interface
  interface DefaultTheme extends Theme {}
}
const themeOptions = getThemeOpts(theme);
const oldTheme = adaptV4Theme(themeOptions);
const muiTheme = createTheme(oldTheme);

return (
    <StyledEngineProvider injectFirst>
      <ThemeProvider theme={muiTheme}>{children}</ThemeProvider>
    </StyledEngineProvider>
  );

Part of getThemeOpts is here related to Button (note that I tried doing the adopt with old format as well as using the new format).

MuiButton: {
        text: {
          textTransform: "none"
        },
        root: {
          "&.Mui-disabled": {
            color: theme === Theme.Light ? "rgba(0,0,0,0.26)" : "rgba(255,255,255,0.5)"
          }
        }
      },

Now the usage of the button:

import { Button } from "@mui/material";
<Button
    variant="outlined"
    aria-controls="simple-menu"
    aria-haspopup="true"
 >

I've also gone through the docs and added the following:

package.json

"@mui/icons-material": "6.1.7",
"@mui/lab": "6.0.0-beta.15",
"@mui/x-date-pickers": "7.22.2",
"@mui/material": "6.1.7",
"@mui/styled-engine-sc": "6.1.7",
"@mui/styles": "6.1.7",

webpack.config.js

resolve: { alias: Object.assign({"@mui/styled-engine": "@mui/styled-engine-sc"}) }

tsconfig.json

"paths": {
      "@mui/styled-engine": ["./node_modules/@mui/styled-engine-sc"]
    },

All of the styling I'm trying to do doesn't seem to matter, since I'm not even at that point yet. The default mui button is not getting the right style. It is being applied with MuiButtonBase, giving it a border of 0, margin 0, etc...

Any ideas? Thanks

Update 1: I realize I was trying to go from 4 to 5, but I loaded it to MUI 6 instead. I don't think the changes are any different though.

本文标签： reactjsUpgrading to MUI 5 with styled components issuesStack Overflow