MUI Outlined Input标签文本被划除问题求助

你的MUI OutlinedInput组件出现标签被边框划除的问题，主要由自定义样式或组件结构不符合MUI布局预期导致，以下是具体修复步骤：

• 移除OutlinedInput上的margin类：你给OutlinedInput添加的marginBtm15px会破坏FormControl内部的布局逻辑，导致标签定位偏移被边框覆盖。建议将这个margin样式移到FormControl上，或者调整样式作用范围。

• 替换IconButton内的p标签：MUI的InputAdornment和IconButton内部不适合用p标签，p标签自带的默认边距、行高会打乱输入框内部布局，进而影响标签位置。直接用文本节点或Typography组件替代即可：

  <IconButton onClick={handleClickShowPassword} onMouseDown={handleMouseDownPassword}>
    {showPassword ? 'Hide' : 'Show'}
  </IconButton>
  

• 确认标签与输入框的关联匹配：虽然你的htmlFor和id都是new-password，可以再检查是否存在大小写、拼写错误，确保两者完全匹配，这是标签正确浮动的基础。

• 排查全局样式冲突：如果以上步骤无效，检查项目全局CSS是否覆盖了MUI默认样式，比如给label或.MuiOutlinedInput-root设置了额外的定位、边距样式。

修改后的完整代码示例：

<FormControl fullWidth variant='outlined' className='marginBtm15px'>
  <InputLabel htmlFor='new-password'>New Password</InputLabel>
  <OutlinedInput
    id='new-password'
    value={newPassword}
    type={showPassword ? 'text' : 'password'}
    onChange={handleNewPasswordChange}
    endAdornment={
      <InputAdornment position='end'>
        <IconButton onClick={handleClickShowPassword} onMouseDown={handleMouseDownPassword}>
          {showPassword ? 'Hide' : 'Show'}
        </IconButton>
      </InputAdornment>
    }
  />
</FormControl>

内容的提问来源于stack exchange，提问作者jake clark