Closed yogeshkrishnani-alation closed 2 days ago
@yogeshkrishnani-alation disableUnderline
is only for the 'filled'
variant of TextField, not 'outlined'
This theme should work:
const theme = createTheme({
palette: {
primary: {
main: purple[500],
},
secondary: {
main: green[500],
},
},
components: {
MuiTextField: {
defaultProps: {
disableUnderline: true,
variant: 'filled',
},
},
},
});
Here's a working sandbox: https://stackblitz.com/edit/vitejs-vite-fygb6l?file=src%2FApp.jsx
Duplicate of https://github.com/mui/material-ui/issues/44145
@mj12albert Thanks for the quick response! I understand now that disableUnderline
is only applicable to the 'filled'
variant and not 'outlined'
. However, I noticed in the example you provided that you didn’t use slotProps
to pass disableUnderline
. Is there a particular reason for this approach?
When I try to pass disableUnderline through slotProps, the Autocomplete component still breaks. I've shared a sandbox link here for reference: https://stackblitz.com/edit/vitejs-vite-6rklm8?file=src%2FApp.jsx.
Previously, we used InputProps to pass disableUnderline, but during the MUI upgrade from v5 to v6, it was replaced by slotProps.input. The issue I’m facing is that when the Autocomplete
breaks, there’s no MUI-specific error or stack trace to indicate why it’s failing. This makes it hard to troubleshoot the issue, especially if it’s related to using disableUnderline
with an incompatible variant.
Do you think there’s room for improvement in how MUI handles overrides or provides error feedback in cases like this?
you didn’t use slotProps to pass disableUnderline. Is there a particular reason for this approach?
@yogeshkrishnani-alation It's not supported yet 😓 see https://github.com/mui/material-ui/pull/43606
@mj12albert I would describe it as being supported since it's part of the official documentation and the mui version upgrade/migration script, but not fully functional due to some existing open issues like https://github.com/mui/material-ui/pull/43606.
Steps to reproduce
Link to live example: https://stackblitz.com/edit/vitejs-vite-6rklm8?file=src%2FApp.jsx
Steps:
Current behavior
Autocomplete component is not working
Expected behavior
Autocomplete component should work as expected
Context
If we replace slotProps with InputProps, autocomplete is working as expected. However, that's not ideal, as InputProps is deprecated and will be removed in v7.
Your environment
``` System: OS: Linux 5.0 undefined Binaries: Node: 18.20.3 - /usr/local/bin/node npm: 10.2.3 - /usr/local/bin/npm pnpm: 8.15.6 - /usr/local/bin/pnpm Browsers: Chrome: 130.0.6723.59 npmPackages: @emotion/react: ^11.13.3 => 11.13.3 @emotion/styled: ^11.13.0 => 11.13.0 @mui/core-downloads-tracker: 6.1.5 @mui/material: ^6.1.5 => 6.1.5 @mui/private-theming: 6.1.5 @mui/styled-engine: 6.1.5 @mui/system: 6.1.5 @mui/types: 7.2.18 @mui/utils: 6.1.5 @types/react: ^18.3.11 => 18.3.11 react: ^18.3.1 => 18.3.1 react-dom: ^18.3.1 => 18.3.1 ```npx @mui/envinfo
Search keywords: autocomplete, slotProps, textfield, override, theme