React Material-ui InputLabel 组件无法相应工作

Question

我希望标签能够正确显示并根据其值（即标准（角色、员工数量等）采用宽度），并且不想给它固定的宽度。

但是标签没有完全显示，即没有正确获取宽度。我不想给 FormControl fullWidth 属性。下面是代码。 （稍后我会更改 MenuItems 的值，我想先解决这个问题。）

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' }} >
               <InputLabel  htmlFor={criteria} >{criteria}</InputLabel>
               <Select
                   value={12}
                   label={criteria}
                   id={criteria} 
                   
               >
                   <MenuItem value={10}>Ten</MenuItem>
                   <MenuItem value={20}>Twenty</MenuItem>
                   <MenuItem value={30}>Thirty</MenuItem>
               </Select>
           </FormControl>
       ))}
       </>
      )
    }

Answer 1

如果您不想为 FormControl 提供 fullWidth 属性，您可以通过将条件的长度乘以 20 来向 FormControl 添加动态宽度（以 px 为单位），以确保在条件之后有一个额外的空间。请参阅下面的示例：

import { FormControl, InputLabel, MenuItem, Select } from '@mui/material'
import React from 'react'

function Filter() {
    const filterCritieria=[
        'Roles','No of Employees','Experience','Remote','Minimum Base Pay Salary', 'Minimum Base Pay Salary Minimum Base Pay Salary'
    ]
  return (
   <>
   {filterCritieria.map((criteria,index)=>(
       <FormControl key={index} sx={{  margin: '10px', width: `${criteria.length * 20}px` }} >
           <InputLabel  htmlFor={criteria} >{criteria}</InputLabel>
           <Select
               value={12}
               label={criteria}
               id={criteria}               
           >
               <MenuItem value={10}>Ten</MenuItem>
               <MenuItem value={20}>Twenty</MenuItem>
               <MenuItem value={30}>Thirty</MenuItem>
           </Select>
       </FormControl>
   ))}
         
         
        
   </>
  )
}

export default Filter;

希望这对你有帮助，祝你好运！