MUI v5自定义Select变体触发TypeError: 无法读取undefined的'ref'属性

问题详情 #

给MUI v5的Select组件添加自定义变体时，触发以下错误：

TypeError: Cannot read properties of undefined (reading 'ref')
    at Select (/var/www/miniatureawards.com/node_modules/@mui/material/Select/Select.js:119:74)
    at renderWithHooks (/var/www/miniatureawards.com/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
    at renderForwardRef (/var/www/miniatureawards.com/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5842:18)
    at renderElement (/var/www/miniatureawards.com/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6005:11)
    at renderNodeDestructiveImpl (/var/www/miniatureawards.com/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/var/www/miniatureawards.com/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderNode (/var/www/miniatureawards.com/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
    at renderChildrenArray (/var/www/miniatureawards.com/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7)
    at renderNodeDestructiveImpl (/var/www/miniatureawards.com/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6141:7)
    at renderNodeDestructive (/var/www/miniatureawards.com/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
error - TypeError: Cannot read properties of undefined (reading 'ref')

相关配置与代码如下：

theme.js 自定义变体配置 #

MuiSelect: {
  variants: [
    {
      props: { variant: 'topNav' },
      style: {
        textTransform: 'none',
      },
    },
  ],
  styleOverrides: {
    root: {
      border: 0,
      '&::before, &::after': {
        border: 0,
        display: 'none',
      },
    },
  },
},

组件调用代码 #

<Select
  variant="topNav"
>
  <MenuItem value="-1">All Categories</MenuItem>
</Select>

移除variant="topNav"属性后，错误消失：

<Select>
  <MenuItem value="-1">All Categories</MenuItem>
</Select>

原因 #

MUI v5的Select组件不支持通过variants字段自定义variant属性值，官方仅预设了"outlined"、"filled"、"standard"三个合法的variant值。传入非内置的自定义值会导致组件内部逻辑异常，触发ref读取失败的错误。

解决方案 #

放弃自定义variant的方式，改用以下两种替代方案：

方案1：自定义className + 主题样式覆盖 #

在主题中针对自定义类名配置样式：

// theme.js
MuiSelect: {
  styleOverrides: {
    root: {
      border: 0,
      '&::before, &::after': {
        border: 0,
        display: 'none',
      },
    },
    // 自定义类名对应的样式
    topNav: {
      textTransform: 'none',
    },
  },
},

组件调用时添加className：

<Select
  className="topNav"
>
  <MenuItem value="-1">All Categories</MenuItem>
</Select>

方案2：用styled工具封装自定义组件 #

通过MUI的styled工具创建专属的Select组件：

import { styled } from '@mui/material/styles';
import Select from '@mui/material/Select';

const TopNavSelect = styled(Select)(({ theme }) => ({
  textTransform: 'none',
  border: 0,
  '&::before, &::after': {
    border: 0,
    display: 'none',
  },
}));

// 使用自定义组件
<TopNavSelect>
  <MenuItem value="-1">All Categories</MenuItem>
</TopNavSelect>

内容的提问来源于stack exchange，提问作者Jamie Hutber