select 下拉 material ui 中的元素重叠

Question

我是 React 新手，正在使用 material-ui 的 select 按钮。它添加了我们提供的任何内容的高亮文本，一旦元素 selected.

它就会消失

然而，在选项的 selection 上，两个文本变得模糊，如下所示：

这是相同的代码：

<Grid item xs={6}>
                <FormControl id="Process" style={{ width: "78%" }} size="small">
                  <InputLabel
                    htmlFor="Process"
                    id="Process"
                    style={{
                      marginLeft: 10,
                      top: "50%",
                      transform: "translate(0,-50%"
                    }}
                  >
                    Process
                  </InputLabel>
                  <Select
                    labelId="Process"
                    name="Process"
                    id="Process"
                    onChange={() => this.setState({ addModalShow: true })}
                    defaultValue={values.Process}
                    variant="outlined"
                    inputProps={{
                      id: "Process"
                    }}
                  >
                    <MenuItem value="1">Implemented</MenuItem>
                    <MenuItem value="2">Implementation in Progress</MenuItem>
                    <MenuItem value="3">Not Implemented</MenuItem>
                  </Select>
                </FormControl>
                <Button
                  variant="outlined"
                  color="primary"
                  onClick={() => this.setState({ addModalShow: true })}
                  size="small"
                  style={styles.button2}
                >
                  +
                </Button>
                <label
                  id="process"
                  style={{ visibility: "hidden", color: "red" }}
                >
                  Process cannot be blank
                </label>
              </Grid>
            </Grid>

谁能告诉我为什么会这样？

Answer 1

再见，您的问题与您在 InputLabel 上申请的 style 有关。在标准版本中，当您 select Select 组件上的值时，InputLabel 不会消失。将移动到 Select 元素之上。

如果您在 InputLabel 上进行了样式自定义，标签将不会移动到顶部，您会看到两个文本模糊。所以你有2个选择：

删除样式自定义，我的意思是删除这个css:

style={{
   marginLeft: 10,
   top: "50%",
   transform: "translate(0,-50%"
}}

为 InputLabel 内容设置条件。类似于：
```
{values.Process === "" && "Process"}
```

这样，Process 标签将仅在您未在 Select 组件上 select 编辑任何内容时可见。

Here 一个 codesandbox 示例。

select 下拉 material ui 中的元素重叠

Elements getting overlapped in select drop down material ui

javascript

reactjs

react-router

material-ui

formsy-material-ui