Material-UI版本5中的主题类型是什么?

Question

我正在更新我的项目到MUI版本5。建议使用情感CSS。我想用theme的性质。现在，typescript要求输入theme。下面的版本不能工作。我如何提供一个类型?

import { Theme } from "@mui/material"
const Root = styled('div')(({ theme: Theme }) => ({
background: theme.palette.grey[50],
}))

Answer 1

如果您碰巧从@mui/styles导入styledAPI，那么它将无法工作，因为它没有提供开箱即用的MUI主题。您需要将createTheme传递给ThemeProvider，然后增加DefaultTheme的类型，因为默认情况下它是一个空接口:

import { Theme } from '@mui/material/styles';
declare module '@mui/styles' {
interface DefaultTheme extends Theme {}
}

但是请注意，不建议使用遗留包@mui/styles。更多细节请看我的另一个答案。

---

如果您已经从@mui/material/styles导入了styled:由于您使用的是typescript，请删除Theme类型，styled函数可以在回调中推断属性theme的类型，因此您不必做任何事情:

const Root = styled('div')(({ theme }) => ({
background: theme.palette.grey[50],
}))

但理论上，如果theme是未类型化的，则可以这样添加:

const Root = styled('div')(({ theme }: { theme: Theme }) => ({
background: theme.palette.grey[50],
}))