Repository: material-ui
Issue: [styled-engine] Emotion cache throws in Firefox when disabled prop changes between SSR and client side
Labels: external dependency,package: styled-engine

### 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 : 
```es
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 : 
```jsx
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

<details>
  <summary>`npx @mui/envinfo`</summary>

```
    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
```
</details>