覆盖 MaterialUI MuiCheckbox 图标的默认道具

Question

我想在整个项目中使用自定义 SVG 图标覆盖 MuiCheckbox 图标，例如 icon 和 indeterminateIcon 道具。

我正在使用自定义主题：

import { CustomBlankIcon, CustomIndeterminateIcon } from "./Icons";

const theme = responsiveFontSizes(
  createMuiTheme({
    props: {
      MuiCheckbox: {
          icon: CustomBlankIcon,
          indeterminateIcon: CustomIndeterminateIcon
      }
    },
  })
);

但是，这不起作用，它会引发错误：

Cannot read property 'fontSize' of undefined

关于如何覆盖此主题配置文件中的默认图标道具的任何想法？

Answer 1

您应该传递 node 而不是函数/组件名称，试试

import { CustomBlankIcon, CustomIndeterminateIcon } from "./Icons";

const theme = responsiveFontSizes(
  createMuiTheme({
    props: {
      MuiCheckbox: {
          icon: <CustomBlankIcon />,
          indeterminateIcon: <CustomIndeterminateIcon />
      }
    },
  })
);