React Material-UI InputLabel组件显示异常，标签宽度适配问题求助

直接给你几个可行的调整方案，基于现有代码修改，不用设置固定宽度或fullWidth属性：

方案一：让控件整体自适应内容宽度 #

给FormControl、InputLabel和Select添加自适应样式，同时保证标签不被截断：

function Filter() {
  const filterCritieria=[
      'Roles','No of Employees','Experience','Remote','Minimum Base Pay Salary'
  ]
  return (
   <>
   {filterCritieria.map((criteria,index)=>(
       <FormControl 
         key={index} 
         sx={{  
           margin: '10px',
           minWidth: 'fit-content' // 让控件最小宽度适配内容
         }} 
       >
           <InputLabel 
             htmlFor={criteria}
             sx={{
               whiteSpace: 'nowrap', // 禁止标签文本换行
               minWidth: 'fit-content' // 标签宽度适配自身内容
             }}
           >{criteria}</InputLabel>
           <Select
               value={12}
               label={criteria}
               id={criteria}
               sx={{ width: 'fit-content' }} // Select宽度自适应内容
           >
               <MenuItem value={10}>Ten</MenuItem>
               <MenuItem value={20}>Twenty</MenuItem>
               <MenuItem value={30}>Thirty</MenuItem>
           </Select>
       </FormControl>
   ))}
   </>
  )
}

方案二：优化标签收缩后的显示 #

如果标签在选中状态下（收缩后）仍有截断，可针对性调整收缩样式：

<Select
  value={12}
  label={criteria}
  id={criteria}
  sx={{
    width: 'fit-content',
    // 调整收缩后标签的显示，避免被截断
    '& .MuiInputLabel-shrink': {
      whiteSpace: 'nowrap',
      transform: 'translate(0, -1.5px) scale(0.75)'
    }
  }}
>

关键调整说明 #

• whiteSpace: 'nowrap'：强制标签文本保持一行，避免换行导致的内容截断
• fit-content：让元素宽度刚好包裹自身内容，既不会留白过多也不会挤压内容
• 针对MuiInputLabel-shrink的样式：解决Select选中后标签收缩变形、截断的问题

内容的提问来源于stack exchange，提问作者Gaurav Bahuguna