小编pic*_*ick的帖子

这是有关主题MUI v5 的问题的后续问题。尽管我的问题得到了解答，但我仍然很难理解@emotion/reactAPI 的确切位置以及何时@mui/material/styles 应该使用。我阅读了迁移指南，虽然这确实回答了一些“如何”问题，但我不了解更大的情况。

我什么时候使用MUI的造型，什么时候使用情感？为什么有两种造型解决方案？我应该使用 MUIThemeProvider还是 Emotion？有什么区别？这些问题对于有经验的用户来说可能是微不足道的，但对于刚刚入门的人来说，这些问题需要理解和理解。

我已将 MUI 从 v4 升级到 v5。但是，我现在很难理解主题如何与可用的不同主题解决方案一起使用。我不太明白在哪里使用 MUI 主题/样式组件以及何时使用情感组件。

在新组件中，我使用sxprop 来应用样式，但是我有很多组件仍在使用createStyles/useStyles函数。

我目前有以下设置：

import {
  ThemeProvider as MuiThemeProvider,
  Theme,
  StyledEngineProvider,
  createTheme,
} from "@mui/material/styles";
import { ThemeProvider } from "@emotion/react";

declare module "@mui/material/styles" {
  interface Theme {
    mycompany: {
      primary: string;
    };
  }
  // allow configuration using `createTheme`
  interface ThemeOptions {
    mycompany: {
      primary: string;
    };
  }
}

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

const theme = createTheme({
  mycompany: …

我正在尝试在（模式）内使用下拉选择Dialog。但是，选项会被模式的底部切断。我怎样才能获得继续向下越过底部边界的选项？

我正在使用 MUI v5。

<Dialog open={open}>
  <DialogContent>
    <Autocomplete
      disablePortal
      id="combo-box-demo"
      options={options}
      // getOptionLabel={(option) => option}
      sx={{ width: 300 }}
      renderInput={(params) => <TextField {...params} label="Numbers" />}
    />
  </DialogContent>
</Dialog>

（极端）示例：代码沙箱