Reactjs 材质UI网格-在“选择元素”中选择一个项目后，将调整Textfield的大小

我正在使用MaterialUI构建一个简单的UI。当我从select元素中选择一个时，Textfield大小（设置为fullWidth）变小了

我将代码缩减到最小，这样可以重现奇怪的动作

function ImportDialog(props) {
  const [state, setState] = useState({
    id: "",
    color: ""
  });

  const handleChange = name => event => {
    setState({ ...state, [name]: event.target.value });
  };

  const inputLabel = React.useRef(null);
  const [labelWidth, setLabelWidth] = React.useState(0);

  useEffect(() => {
    setLabelWidth(inputLabel.current.offsetWidth);
  }, []);

  return (
    <div style={{ width: "40vw", height: "50vh", margin: "25vh auto" }}>
        <Grid container spacing={2}>
          <Grid item md={6}>
            <Grid container direction="column">
              <Grid item>
                <TextField
                  label="ID"
                  margin="dense"
                  variant="outlined"
                  fullWidth
                  value={state.id}
                  onChange={handleChange("id")}
                />
              </Grid>
              <Grid item>
                <FormControl
                  variant="outlined"
                  margin="dense"
                  fullWidth
                >
                  <InputLabel ref={inputLabel} htmlFor="outlined-age-simple">
                    Color
                  </InputLabel>
                  <Select
                    value={state.color}
                    onChange={handleChange("color")}
                    labelWidth={labelWidth}
                    inputProps={{
                      name: "color",
                      id: "outlined-age-simple"
                    }}
                  >
                    <MenuItem value="">
                      <em>None</em>
                    </MenuItem>
                    <MenuItem value={1}>Sup1</MenuItem>
                 </Select>
                </FormControl>
              </Grid>
            </Grid>
          </Grid>
        </Grid>
    </div>
  );
}

export default withStyles(styles)(ImportDialog);

函数导入对话框（道具）{
常量[状态，设置状态]=使用状态({
id:“”，
颜色：“
});
const handleChange=name=>event=>{
setState（{…状态，[名称]：event.target.value}）；
};
const inputLabel=React.useRef（null）；
常量[labelWidth，setLabelWidth]=React.useState（0）；
useffect（（）=>{
setLabelWidth（inputLabel.current.offsetWidth）；
}, []);
返回(
颜色
没有一个
Sup1
);
}
导出默认样式（样式）（ImportDialog）；

当我从Select元素中选择一个后将焦点移到textfield时，它会变小

请尝试较大窗口大小的代码沙盒。

---

这是codesandbox的url。

这似乎只发生在Chrome上，不知道你是否发现了渲染错误。真奇怪，它在我的计算机上工作。效果非常好。在Chrome、Mozilla、IE、Edge上进行了测试；对其中四个都很有效