Open
Description
Steps to reproduce
Steps:
- I followed the instruction here, copy the same config of
MuiTextFieldtoMuiPickersTextField:
MuiInputBase: {
styleOverrides: {
root: (() => {
// Declared here so that the objects references are stable across renders
const baseStyles = { fontSize: '1rem' }
const readonlyStyles = {
...baseStyles,
[`&:not(.Mui-focused)`]: {
'&:hover': {
[`& .${outlinedInputClasses.notchedOutline}`]: {
borderColor: 'rgba(0, 0, 0, 0.23)',
},
},
},
}
return ({ ownerState }) => {
if (ownerState.readOnly) {
return readonlyStyles
}
return baseStyles
}
})(),
},
},
MuiPickersInputBase: {
styleOverrides: {
root: (() => {
// Declared here so that the objects references are stable across renders
const baseStyles = { fontSize: '1rem' }
const readonlyStyles = {
...baseStyles,
[`&:not(.Mui-focused)`]: {
'&:hover': {
[`& .${outlinedInputClasses.notchedOutline}`]: {
borderColor: 'rgba(0, 0, 0, 0.23)',
},
},
},
}
return ({ ownerState }) => {
if ('readOnly' in ownerState && ownerState.readOnly) {
return readonlyStyles
}
return baseStyles
}
})(),
},
},
- Then it reports error when run the codes:
Uncaught TypeError: Cannot use 'in' operator to search for 'readOnly' in undefined
at computedTheme.components.MuiPickersInputBase.styleOverrides.root
The above error occurred in the component:
Seems like MuiPickersInputBase indicates an non-exist component MuiPickersInputBaseInput, so its ownerState is undefined.
Current behavior
No response
Expected behavior
No response
Context
No response
Your environment
npx @mui/envinfo
System:
OS: macOS 15.3.2
Binaries:
Node: 22.9.0 - ~/.local/share/nvm/v22.9.0/bin/node
npm: 10.8.3 - ~/.local/share/nvm/v22.9.0/bin/npm
pnpm: 10.6.5 - ~/.local/share/nvm/v22.9.0/bin/pnpm
Browsers:
Chrome: 135.0.7049.42
Edge: 126.0.2592.81
Safari: 18.3.1
npmPackages:
@emotion/react: 11.14.0 => 11.14.0
@emotion/styled: 11.14.0 => 11.14.0
@mui/icons-material: 7.0.1 => 7.0.1
@mui/lab: 7.0.0-beta.10 => 7.0.0-beta.10
@mui/material: 7.0.1 => 7.0.1
@mui/system: 7.0.1 => 7.0.1
@mui/types: 7.4.0 => 7.4.0
@mui/x-data-grid: 7.28.3 => 7.28.3
@mui/x-data-grid-generator: 7.28.3 => 7.28.3
@mui/x-data-grid-premium: 7.28.3 => 7.28.3
@mui/x-data-grid-pro: 7.28.3 => 7.28.3
@mui/x-date-pickers: 8.0.0-beta.2 => 8.0.0-beta.2
@mui/x-date-pickers-pro: 8.0.0-beta.2 => 8.0.0-beta.2
@mui/x-license: 7.28.0 => 7.28.0
@mui/x-tree-view: 7.28.1 => 7.28.1
@types/react: 18.3.13 => 18.3.13
react: 18.3.1 => 18.3.1
react-dom: 18.3.1 => 18.3.1
styled-components: 5.3.5 => 5.3.5
typescript: 5.8.2 => 5.8.2
Search keywords: date-picker, MuiPickersInputBase