0

I am trying to use custom variants to style my themes in MUI v5 but I am seeing the error: enter image description here

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')

Broken with variants

theme.js

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

component.js

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

To fix the issue removing the variant will solve the issue

     <Select>
        <MenuItem value="-1">All Categories</MenuItem>
      </Select>
Jamie Hutber
  • 26,790
  • 46
  • 179
  • 291

1 Answers1

0

Please look at the PROPERTIES in the documentation .. You have a variant of topNav

Only the following values are allowed for the variant property:

variant = 'filled'
variant = 'outlined'
variant = 'standard'

MUI SELECT PROPERTIES

Zak
  • 6,976
  • 2
  • 26
  • 48
  • Thanks Zak, however thats exactly what custom variants are for, seen here: https://mui.com/material-ui/customization/theme-components/#creating-new-component-variants – Jamie Hutber Nov 01 '22 at 19:33
  • Oye -- You're correct. Are you using MUI 5 and React 18? Maybe a look at [this question](https://stackoverflow.com/questions/69547756/mui-makestyles-cannot-read-properties-of-undefined) -- Are you importing your theme correctly? That's all I got, I'll delete this answer if you come back with a "negative" on that. – Zak Nov 01 '22 at 20:15