React Typescript MaterialUI Paper 'background of undefined'

Question

每次添加

<Paper elevation={0} />

到我的反应组件，我收到

Cannot read properties of undefined (reading 'background')
TypeError: Cannot read properties of undefined (reading 'background')

我不知道如何修复这个错误，我真的很想使用这个

这里是完整的源代码

import Paper from '@mui/material/Paper';
const Page: FC = () => {
return (
<React.Fragment>
<Paper elevation={0} />
</React.Fragment>
);
};

Answer 1

这个错误可能是因为Material UI的Paper组件。当您试图访问未定义的背景属性时。要修复此错误，可以尝试向Paper组件传递一个sx prop来定义背景属性。

下面是一个通过设置sx prop来修复错误的例子:

import Paper from '@mui/material/Paper';
const Page: FC = () => {
return (
<React.Fragment>
<Paper elevation={0} sx={{ background: 'white' }} />
</React.Fragment>
);
};
export default Page;

就像上面的例子一样，我添加了sx prop来设置背景属性为白色。你可以用任何其他有效的CSS颜色值替换白色来设置不同的背景色。

* *

注意

* *sx prop是使用style -system库定义内联样式的简写。你也可以在单独的CSS文件中使用纯CSS定义样式，并使用className prop将类名应用于Paper组件。

Answer 2

修复了在themeprovider中包装的问题

import Paper from '@mui/material/Paper';
const theme = createTheme({
palette: {}
});
const Page: FC = () => {
return (
<React.Fragment>
<ThemeProvider theme={theme}>
<Paper elevation={0} sx={{ background: 'white' }} />
</ThemeProvider>
</React.Fragment>
);
};
export default Page;