小编Jus*_*ane的帖子

我有一个性别选择字段，它的标签位于选择的中心，这是所需的布局。

当用户选择此字段时，标签会飞到左上角，如图所示。我想要做的是完全删除标签并用蓝色边框替换它。

这是我的代码：

          <TextField
            id='gender-select'
            select
            label="Gender"
            className={classes.textField}
            value={gender}
            onChange={data => setGender(data.target.value)}
            margin='normal'
            variant='outlined'>
            {genders.map(option => (
              <MenuItem key={option.value} value={option.value}>
                {option.label}
              </MenuItem>
            ))}
          </TextField>

这是我的样式代码：

const useStyles = makeStyles(theme => ({
  textField: {
    marginLeft: theme.spacing(1),
    marginRight: theme.spacing(1),
    marginTop: theme.spacing(1),
    '& .MuiOutlinedInput-root': {
      '& fieldset': {
        borderColor: '#CACACA'
      },
      '&:hover fieldset': {
        borderColor: '#007AFF'
      },
      '&.Mui-focused hover': {
        borderColor: '#007AFF'
      },
      '&.Mui-focused fieldset': {
        borderColor: '007AFF'
      }
    }
  }
})) 

我曾尝试在标签道具上添加一个条件来使其无效，例如：

label={gender== "" ? "Gender": null}

但这只是给了我一个空白行来代替标签。

当字段处于焦点时，如何更改蓝线的标签？