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.
Duplicates
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 :
and use it like this :
It ...
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 🕹
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 ```