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

Duplicates

[X] I have searched the existing issues

Latest version

[X] 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 🕹

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

Context 🔦

please see Current behavior section

Your environment 🌎

Firefox version : 101.0 (64 bits) on Windows

`npx @mui/envinfo`

``` 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 ```

mui / material-ui