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

[synaptiko]

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 🌎

`npx @mui/envinfo`

  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 

[michaldudak]

I can reproduce it. It seems to be a bug indeed.
Would you be interested in looking for a fix?

[synaptiko]

@michaldudak Thanks for checking it. Not interested in the current moment, maybe later when I'm done with my Remix project (I decided to not use defaultProps for now).

[tigerabrodi]

@michaldudak We are encountering a similar issue where the palette.background is being applied from the theme but not the palette.primary color.

It is quite weird, though to keep in mind, we are using Turborepo as our monorepo manager.

Not sure how we'd create a reproducible sample, but what is interesting is that we tried cloning the MUI Remix sample, and add our theme to it, and that works! 😆