无法将主题传递给“@mui/system” styled()

Question

我试图通过以下方式传递主题：

declare module "@mui/styles/defaultTheme" {
  // eslint-disable-next-line @typescript-eslint/no-empty-interface
  interface DefaultTheme extends Theme {}
}

ReactDOM.render(
  <StyledEngineProvider injectFirst>
    <ThemeProvider theme={theme}>
      <Main />
    </ThemeProvider>
  </StyledEngineProvider>,
  document.getElementById("root")
);

我尝试通过以下方式来阅读：

import { styled } from "@mui/system";

type StyledTabProps = {
  isActive: boolean;
};

const StyledTab = styled("div", {
  shouldForwardProp: (prop) => prop !== "isActive"
})<StyledTabProps>(({ theme, isActive }) => {
  console.log("theme", theme);
  return {
    color: isActive ? "red" : "blue"
  };
});

我尝试传递的主题与最终获得 console.logged 的​​主题不同（调色板对象中缺少属性）

问题的代码沙箱可以在这里找到：

https://codesandbox.io/s/wandering-https-ubhqs?file=/src/Main.tsx

Answer 1

您只需要使用ThemeProviderfrom@mui/material/styles而不是 from @mui/styles。然后就可以了。

请参考这个

// index.tsx

...
import { Theme, ThemeProvider, StyledEngineProvider } from "@mui/material/styles";

...

而且 MUI v5 主题结构与 v4 有所不同，并不完全相同。

您不能使用adaptV4Theme，只需更新主题结构，但请为其定义一些自定义类型。

（codesandbox 说adaptV4Theme不知何故已被弃用。）

例如，您overrides对主题对象使用了选项，但它已被删除，因此您需要使用components它来代替它。https://mui.com/guides/migration-v4/#theme-struct

...
// styles/theme.ts

export default createTheme(
  {
    ...
    components: {
      MuiInputBase: {
        root: {
        ...
  }
...