Has anyone encountered this error when trying to customize themes in MUI v5 using custom variants? I keep seeing this error message: https://i.sstatic.net/D7F0e.png
TypeError: Cannot read properties of undefined (reading 'ref')
at Select (/var/www/miniatureawards.com/node_modules/@mui/material/Select/Select.js:119:74)
... (rest of the error message)
error - TypeError: Cannot read properties of undefined (reading 'ref')
Issue with Variants Implementation
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>
The solution for fixing the issue is to remove the variant from the Select component:
<Select>
<MenuItem value="-1">All Categories</MenuItem>
</Select>