[TextField] defaultProps seems to be ignored when React.hydrate is used in SSR setup with Remix

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

I used Remix + MUI example as my base and the only change I did is in the theme part, like this:

import { createTheme } from '@mui/material';

const theme = createTheme({
    MuiInputLabel: {
      defaultProps: {
        shrink: true,
      },
    },
    MuiTextField: {
      defaultProps: {
        InputLabelProps: {
          shrink: true,
        }
      }
    }
  },
});

export default theme;

In my app I then have login form which uses TextField component. When I disable javascript, the form looks correct, the labels are shrunk by default. When I enable javascript and reload the page, the labels are shrunk but when I focus & blur the field(s), it seems that they use the default behavior.

Also there is the following warning in the console:

Warning: Prop `className` did not match. Server: "MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-root MuiFormLabel-colorPrimary Mui-required css-1sumxir-MuiFormLabel-root-MuiInputLabel-root" Client: "MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined MuiFormLabel-root MuiFormLabel-colorPrimary Mui-required css-14s5rfu-MuiFormLabel-root-MuiInputLabel-root"

Expected behavior 🤔

I would expect that defaultProps are correctly hydrated in SSR setup.

Steps to reproduce 🕹

Steps:

1. clone MUI repo and go to https://github.com/mui-org/material-ui/tree/master/examples/remix-with-typescript
2. change theme to have the changes from "Current behavior" section, add a login form to the index route
3. start the project with npm run dev, load the page and check the console

Context 🔦

https://github.com/mui-org/material-ui/tree/master/examples/remix-with-typescript

Your environment 🌎

  System:
    OS: Linux 5.16 Arch Linux
  Binaries:
    Node: 14.18.0 - ~/.volta/tools/image/node/14.18.0/bin/node
    Yarn: 1.22.17 - ~/.volta/tools/image/yarn/1.22.17/bin/yarn
    npm: 6.14.15 - ~/.volta/tools/image/node/14.18.0/bin/npm
  Browsers:
    Chromium: 98.0.4758.80 (Official Build) Arch Linux (64-bit)
    Firefox: 96.0.3
  npmPackages:
    @emotion/react: ^11.7.1 => 11.7.1 
    @emotion/styled: ^11.6.0 => 11.6.0 
    @mui/base:  5.0.0-alpha.67 
    @mui/icons-material: ^5.3.1 => 5.3.1 
    @mui/lab: ^5.0.0-alpha.66 => 5.0.0-alpha.67 
    @mui/material: ^5.3.1 => 5.4.0 
    @mui/private-theming:  5.3.0 
    @mui/styled-engine:  5.3.0 
    @mui/system:  5.4.0 
    @mui/types:  7.1.0 
    @mui/utils:  5.3.0 
    @types/react: ^17.0.24 => 17.0.39 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    typescript: ^4.1.2 => 4.5.5 

Start with the examples/remix-with-typescript example, its theme configuration, and the index route containing the login form. Run npm run dev, reproduce the server/client className warning with JavaScript enabled, and compare the hydrated TextField behavior with the no-JavaScript result; done means defaultProps remain effective after focus and blur without a hydration mismatch.