[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.

[nuarhu]

@ZeeshanTamboli the Stackblizt that you have linked is using mui/material in version 5.15.21 - that was still working.

[ZeeshanTamboli]

@ZeeshanTamboli the Stackblizt that you have linked is using mui/material in version 5.15.21 - that was still working.

My bad. Updated the StackBlitz link above, but it still works in 5.16.4.

[grantbdev]

@ZeeshanTamboli I am experiencing similar issues as the users above and I believe related to #42892, but let me know if you prefer a new issue to be open.

I believe the behavior of default props from themes changed in MUI 5.16.0 as a result of #42820 in an unintentional way that is causing the default props defined in the theme not to be used under certain circumstances: using @mui/icons-material and esbuild.

---

Here is a devbox with the code working as expected with MUI 5.15.21: https://codesandbox.io/p/devbox/reverent-dawn-qqqgnt?file=%2Fsrc%2Findex.jsx%3A12%2C25

The theme's default props for the text field makes the input full-width and adds normal margin:

---

Here is a devbox with the versions bumped to MUI 5.16.7: https://codesandbox.io/p/devbox/reproduction2-not-working-with-icon-forked-rvr4ck?workspaceId=c2ade9f2-c903-41e5-b3b0-05ae3b29e582

The default props are not passed for the text field:

---

Here is a devbox with MUI 5.16.7, but no import used from @mui/icons-material: https://codesandbox.io/p/devbox/hardcore-lewin-tjvy3x?file=%2Fsrc%2Findex.jsx%3A9%2C20

The default props are passed, which indicates that something from the icon import is messing with the code in some way:

---

I tried altering the other variables, React version, emotion instead of styled components, but the only thing that seemed to make a difference besides the icon import was using something other than esbuild.

[ZeeshanTamboli]

@grantbdev Thanks for the detailed reproductions. Yes, it would be better to create a new issue. Also, this is only related to v5. It works with v6 whether you have the icon import or not: https://codesandbox.io/p/devbox/reproduction2-not-working-with-icon-forked-qt975l?workspaceId=92b035ba-df9d-45a7-90b6-6b416aafd4ba.

[grantbdev]

@ZeeshanTamboli Thanks for that note. Today I tested the upgrade to v6 and it did not reproduce this issue. Unfortunately, I'm not able to upgrade yet due to other problems I encountered that I think might be fixed in an upcoming release. However now I know I can jump straight to v6 (hopefully next month) without having to worry about this specific problem, so I will not open a new issue for it.