[styled-engine] Emotion cache throws in Firefox when disabled prop changes between SSR and client side

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

My project uses SSR feature.
I want to disable forms when they are displayed on server, and enable them once hydration has been completed on client.

I created a react hook :

import { useState, useEffect } from "react";

const useIsServerRender = () => {
  const [state, setState] = useState(true);

  useEffect(() => setState(false), []);

  return state;
};

export default useIsServerRender;

and use it like this :

import * as React from "react";
import Box from "@mui/material/Box";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import Select from "@mui/material/Select";

import useIsServerRender from "./useIsServerRender";

export default function BasicSelect() {
  const [age, setAge] = React.useState("");

  const handleChange = (event) => {
    setAge(event.target.value);
  };

  const isServerRender = useIsServerRender();
  console.log(isServerRender);

  return (
    <Box sx={{ minWidth: 120 }}>
      <FormControl fullWidth>
        <InputLabel id="demo-simple-select-label">Age</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={age}
          label="Age"
          onChange={handleChange}
          disabled={isServerRender}
        >
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    </Box>
  );
}

It ...

• works in dev env with Chrome without warning
• works in dev env with Edge without warning
• works with firefox when displayed for the first time without warning
• raises a warning on firefox when refreshing page with F5

Warning: Prop `disabled` did not match. Server: "null" Client: "true"
input
withEmotionCache/<@webpack://test-mui-ssr-emotion/./node_modules/@emotion/react/dist/emotion-element-cbed451f.browser.esm.js?:57:66
SelectInput@webpack://test-mui-ssr-emotion/./node_modules/@mui/material/Select/SelectInput.js?:161:7
withEmotionCache/<@webpack://test-mui-ssr-emotion/./node_modules/@emotion/react/dist/emotion-element-cbed451f.browser.esm.js?:57:66
div
withEmotionCache/<@webpack://test-mui-ssr-emotion/./node_modules/@emotion/react/dist/emotion-element-cbed451f.browser.esm.js?:57:66
InputBase@webpack://test-mui-ssr-emotion/./node_modules/@mui/material/InputBase/InputBase.js?:239:83
OutlinedInput@webpack://test-mui-ssr-emotion/./node_modules/@mui/material/OutlinedInput/OutlinedInput.js?:125:82
withEmotionCache/<@webpack://test-mui-ssr-emotion/./node_modules/@emotion/react/dist/emotion-element-cbed451f.browser.esm.js?:57:66
Select@webpack://test-mui-ssr-emotion/./node_modules/@mui/material/Select/Select.js?:61:82
div
withEmotionCache/<@webpack://test-mui-ssr-emotion/./node_modules/@emotion/react/dist/emotion-element-cbed451f.browser.esm.js?:57:66
FormControl@webpack://test-mui-ssr-emotion/./node_modules/@mui/material/FormControl/FormControl.js?:100:82
div
withEmotionCache/<@webpack://test-mui-ssr-emotion/./node_modules/@emotion/react/dist/emotion-element-cbed451f.browser.esm.js?:57:66
Box@webpack://test-mui-ssr-emotion/./node_modules/@mui/system/esm/createBox.js?:32:72
BasicSelect@webpack://test-mui-ssr-emotion/./SelectExample.js?:32:60
div
withEmotionCache/<@webpack://test-mui-ssr-emotion/./node_modules/@emotion/react/dist/emotion-element-cbed451f.browser.esm.js?:57:66
Box@webpack://test-mui-ssr-emotion/./node_modules/@mui/system/esm/createBox.js?:32:72
div
withEmotionCache/<@webpack://test-mui-ssr-emotion/./node_modules/@emotion/react/dist/emotion-element-cbed451f.browser.esm.js?:57:66
Container@webpack://test-mui-ssr-emotion/./node_modules/@mui/material/Container/Container.js?:91:82
App
InnerThemeProvider@webpack://test-mui-ssr-emotion/./node_modules/@mui/system/esm/ThemeProvider/ThemeProvider.js?:19:70
ThemeProvider@webpack://test-mui-ssr-emotion/./node_modules/@mui/private-theming/ThemeProvider/ThemeProvider.js?:47:7
ThemeProvider@webpack://test-mui-ssr-emotion/./node_modules/@mui/system/esm/ThemeProvider/ThemeProvider.js?:41:7
Main

I've tested on production build, and it looks like this warning isn't raised.
Though I'm not sure if it's just silenced or truly fixed.

I've reproduced this simple reproduction based on your SSR documentation example
this reproduction can be found here : https://github.com/soolidtech/test-mui-ssr-emotion

Expected behavior 🤔

On firefox, in dev env, refreshing a page containing disabled forms on server should not raise a warning.

Steps to reproduce 🕹

1. clone https://github.com/soolidtech/test-mui-ssr-emotion
2. npm run start
3. with Firefox, go to http://localhost:5000
4. refresh page with F5

Context 🔦

please see Current behavior section

Your environment 🌎

Firefox version : 101.0 (64 bits) on Windows

    System:
    OS: Linux 4.19 Ubuntu 18.04.6 LTS (Bionic Beaver)
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 8.71 GB / 24.95 GB
    Container: Yes
    Shell: 3.3.1 - /usr/bin/fish
  Binaries:
    Node: 12.22.12 - /usr/bin/node
    npm: 8.3.1 - ~/.npm-global/bin/npm
  Managers:
    Apt: 1.6.14 - /usr/bin/apt
    RubyGems: 2.7.6 - /usr/bin/gem
  Utilities:
    CMake: 3.10.2 - /usr/bin/cmake
    Make: 4.1 - /usr/bin/make
    GCC: 7.5.0 - /usr/bin/gcc
    Git: 2.36.1 - /usr/bin/git
    Clang: 6.0.0 - /usr/bin/clang
  Virtualization:
    Docker: 20.10.7 - /usr/bin/docker
  IDEs:
    Nano: 2.9.3 - /bin/nano
    VSCode: 1.67.2 - /home/xxx/.vscode-server/bin/xxx/bin/remote-cli/code
    Vim: 8.0 - /usr/bin/vim
  Languages:
    Bash: 4.4.20 - /bin/bash
    Go: 1.16.8 - /usr/bin/go
    Elixir: 1.13.0 - /usr/bin/elixir
    Erlang: 25.0 - /usr/bin/erl
    Java: 11.0.15 - /usr/bin/javac
    Perl: 5.26.1 - /usr/bin/perl
    PHP: 7.2.24 - /usr/bin/php
    Python: 2.7.17 - /usr/bin/python
    Python3: 3.6.9 - /usr/bin/python3
    Ruby: 2.5.1 - /usr/bin/ruby
  Databases:
    MongoDB: 5.0.7 - /usr/bin/mongo
    MySQL: 5.7.38 - /usr/bin/mysql

Start with the linked reproduction repository and follow its Firefox refresh steps after running npm run start. Compare the SSR and client hydration behavior for the disabled prop in development, using the reported Emotion and SelectInput stack trace as the entry point. Done means the Firefox refresh no longer emits the hydration mismatch warning.