FormControl 标签被 Material UI 中的轮廓边框穿过 - ReactJs

Question

我正在使用 Material UI，并通过react-hook-form提供了表单验证。问题在于，在轮廓表单控件中，标签与轮廓边框交叉。

例子：

邮政编码标签工作正常，但设备标签被轮廓边框划掉。

这是代码：

<Grid item xs={12} sm={6}>
                <TextField
                  variant="outlined"
                  placeholder="Enter The Zip Code"
                  required={true}
                  label="Zip Code"
                  fullWidth
                  name="zipcode"
                  inputRef={register({
                    required: "Zip Code is Required.",
                  })}
                  error={Boolean(errors.zipcode)}
                  helperText={errors.zipcode?.message}
                />
</Grid>
<Grid item xs={12} sm={6}>
     <FormControl 
                  variant="outlined"
                  key="Appliances"
                  error={Boolean(errors.appliance)}
                  fullWidth >
                    <InputLabel required={true} id="demo-simple-select-outlined-label" >Appliances</InputLabel>
                    <Controller
                    render={(props) => (
                      <Select size="large" value={props.value} onChange={props.onChange}>
                          <MenuItem value="" disabled>Choose your Appliance</MenuItem>
                          <MenuItem value={'Refrigerator'}>Refrigerator</MenuItem>
                          <MenuItem value={'Freezer'}>Freezer</MenuItem>
                          <MenuItem value={'Ice Maker'}>Ice Maker</MenuItem>
                          <MenuItem value={'Range'}>Range</MenuItem>
                          <MenuItem value={'Cooktop'}>Cooktop </MenuItem>
                          <MenuItem value={'Oven'}>Oven </MenuItem>
                          <MenuItem value={'Microwave'}>Microwave</MenuItem>
                          <MenuItem value={'Washing Machine'}>Washing Machine</MenuItem>
                          <MenuItem value={'Clothes Dryer'}>Clothes Dryer</MenuItem>
                          <MenuItem value={'Dishwasher'}>Dishwasher</MenuItem>
                          <MenuItem value={'Garbage Disposal'}>Garbage Disposal</MenuItem>  
                          <MenuItem value={'Trash Compactor'}>Trash Compactor</MenuItem>
                      </Select>
                     )}
                    name="appliance"
                    control={control}
                    defaultValue=""
                    rules={{
                      required: "Please Choose Your Appliance.",
                    }}
            />
            <FormHelperText>{errors.appliance?.message}</FormHelperText>
      </FormControl>
</Grid>

有人可以帮我解决这个问题吗？我在反应类组件中找到了一个解决方案，但由于我不使用类组件，所以我不确定如何解决这个问题？

Answer 1

您需要将 labelId 和 label 添加到 Select 组件中。

<InputLabel required={true} id="label-for-appliances" >Appliances</InputLabel>

<Select labelId="label-for-appliances" label="Appliances" />