如何覆盖theme.ts中的MuiCheckbox图标defaultProp

Question

我正试图使用文档中的覆盖片段来覆盖Mui复选框的图标默认道具(如上所述(：

const BpIcon = styled('span')(({ theme }) => ({
borderRadius: 3,
width: 16,
height: 16,
...
}));
const theme = createTheme({
components: {
// Name of the component
MuiCheckbox: {
defaultProps: {
icon: <BpIcon />,
},
},
},
});

但是得到以下错误：

./src/theme.ts
Error: error: Expression expected

|
81 |         icon: <BpIcon />,
|                       ^

还尝试通过icon: BpIcon，请参阅：

Unhandled Runtime Error
RangeError: Maximum call stack size exceeded
Call Stack
Module.default
webpack-internal:///./node_modules/@babel/runtime/helpers/esm/extends.js (3:43)
deepmerge
node_modules/@mui/utils/esm/deepmerge.js (8:33)
eval
node_modules/@mui/utils/esm/deepmerge.js (19:0)

有人能帮我理解我做错了什么吗？谢谢

Answer 1

覆盖图标仅在将theme.ts文件重命名为theme.tsx时有效，之后您可以使用以下代码：

const theme = createTheme({
components: {
// Name of the component
MuiCheckbox: {
defaultProps: {
icon: <BpIcon />,
},
},
}
});