[material-ui][TextField] The override for MuiTextField does not work after changing from version 5.15.21 to 5.16.4

[donCapybaradev]

Steps to reproduce

Apply an override of the variant to standard in the latest version.

Current behavior

The override for MuiTextField does not work after changing from version 5.15.21 to 5.16.4.

This is the code I use for that part of the override for this component:

MuiTextField: {
  defaultProps: {
    variant: 'standard',
  },
  styleOverrides: {
    root: {
      '& .MuiInputBase-root': {
        color: 'red',
        backgroundColor: 'blue',
      },
    },
  },
},

The styleOverrides is used to validate that the color change works, but the standard variant is not applied.

Expected behavior

The standard format is expected to be applied to the MuiTextField components.

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: 5.16.4

[sohail9744]

@donCapybaradev what i understand from your issue if it's not the solution for you, please provide a video it would be helpful to understand

There might be a regression or change in how the variant default is handled in version 5.16.4. To work around this issue, you can explicitly set the variant when using the TextField component or use a custom wrapper component to ensure the standard variant is applied.

import { createTheme, ThemeProvider } from '@mui/material/styles';
import TextField from '@mui/material/TextField';

const theme = createTheme({
  components: {
    MuiTextField: {
      styleOverrides: {
        root: {
          '& .MuiInputBase-root': {
            color: 'red',
            // backgroundColor: 'blue',
          },
        },
      },
    },
  },
});

// ;) custom wrapper
function StandardTextField(props) {
  return <TextField variant="standard" {...props} />;
}

function App() {
  return (
    <ThemeProvider theme={theme}>
      <StandardTextField label="Test" />
    </ThemeProvider>
  );
}

export default App;

[sohail9744]

The standard format is applying on my MuiText field it's working for me in the version of 5.16.4 check your theming might be there you are doing some mistake.

[donCapybaradev]

@sohail9744 Yes, I considered that as a solution, but using Overrides to apply the standard variant is simpler due to the frequency with which I use this component in my system. It seems strange that the Overrides for this particular component don't work, and this issue occurred right after updating to the new version.

[Twipped]

We're also noticing a change in styleOverrides variants behavior between 5.15.21 and 5.16.0. I haven't isolated an exact cause yet, but I suspect it has something to do with the rewrite of getInitColorSchemeScript. The css vars that we inject via ScopedCssBaseline are just plain missing.

Unfortunately I don't have a reproduction case I can share, yet.

Edit: I was looking at the wrong code block, the variables are defined in variants, styleOverrides just makes use of them. The usage is present on the page, but the css from the variants isn't. In our case, this is on the Card component, but it's probably connected.

[ZeeshanTamboli]

A reproduction that it works in 5.16.4: https://stackblitz.com/edit/vitejs-vite-dmucqd?file=package.json&terminal=dev. Can somebody a reproduction where it does not work?

[github-actions]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.