javascript - 元素在选择下拉材质 ui 中重叠

Question

我是新来的反应并且正在使用material-ui的选择按钮。它添加了我们给出的任何内容的突出显示文本，一旦选择了元素，它就会消失。

然而，在选择一个选项时，两个文本会变得像这样模糊：

这是相同的代码：

<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

Ciao，你的问题与style你申请的有关InputLabel。在标准版本中，当您在组件InputLabel上选择一个值时不会消失。Select将只是移动到Select元素的顶部。

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

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

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

2. 为InputLabel内容设定条件。就像是：

   {values.Process === "" && "Process"}
   

这样，Process标签只有在您没有在Select组件上选择任何内容时才可见。

这是一个代码沙盒示例。