Material UI V5 Select组件选中项不保留、宽度设置无效问题

两个异常的根因如下：

• 选中值不保存不显示：父组件给Select传入的name属性值为state，但表单状态initialValues中存储该字段值的key是stateId，字段名不匹配导致handleInputChange触发时，更新的是values.state而非绑定到Select的values.stateId，值始终为空自然无法显示选中态。
• 宽度设置不生效：自定义Select组件没有把父组件传入的sx、fullWidth等样式属性透传给内部实际渲染的FormControl和MuiSelect组件，外层写的所有宽度配置都没有作用到真实DOM上，导致组件始终渲染默认最小宽度。
• 额外隐患：内部InputLabel没有和Select做id关联，选中值后容易出现标签和内容重叠的样式问题。

1. 修正字段名匹配问题
   将父组件中Select标签的name属性从state改为stateId，和表单状态字段、绑定的value属性保持一致，确保输入变更时能正确更新对应状态值。
2. 修复属性透传逻辑
   修改自定义Select组件，将除了业务属性（name、label、value、onChange）之外的所有传入属性（包括sx、fullWidth、margin等）全部透传给最外层的FormControl组件，让外层配置的样式规则能正常生效。
3. 补全标签关联属性
   给InputLabel和MuiSelect补全labelId、id关联属性，避免选中后标签样式错位。
4. 移除无效代码
   父组件中传入的options={Select.choices}是无效属性，自定义组件内部已经直接渲染选项列表，这行可以直接删除，同时把组件内部的choices数组从函数内移到组件外，避免每次渲染都重新创建数组造成不必要的重渲染。

父组件Select调用部分 #

<Select  
  sx={{width: "150px", mr: 1 }} 
  name="stateId"
  label="Estado"
  value={values.stateId}
  onChange={handleInputChange}
  fullWidth
/>

自定义Select组件完整代码 #

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

// 巴西州选项列表
const choices = [
  { id: '1', title: 'Acre'}, 
  { id: '2', title: 'Alagoas'},
  { id: '3', title: 'Amazonas' },
  { id: '4', title: 'Amapá'   }, 
  { id: '5', title: 'Bahia'  }, 
  { id: '6', title: 'Distrito Federal'}, 
  { id: '7', title: 'Espírito Santo' }, 
  { id: '8', title: 'Mato Grosso do Sul'}, 
  { id: '9', title: 'Mato Grosso'}, 
  { id: '10', title: 'Rio de Janeiro'}, 
  { id: '11', title:  'São Paulo' }, 
  { id: '12', title: 'Minas Gerais'}, 
  { id: '13', title: 'Paraná'  }, 
];

export default function Select(props) {
  const { name, label, value, onChange, ...rest } = props; 

  return (
    <FormControl variant="outlined" {...rest}>
      <InputLabel id={`${name}-select-label`}>{label}</InputLabel>
      <MuiSelect 
        labelId={`${name}-select-label`}
        label={label} 
        name={name} 
        value={value} 
        onChange={onChange}
      >
        <MenuItem value="">none</MenuItem>
        {
          choices.map(
            item => (<MenuItem key={item.id} value={item.id}>{item.title}</MenuItem>)
          )
        }
      </MuiSelect>
    </FormControl>
  )
}

修改完成后，选择选项时状态会正确更新，选中内容可以正常显示；宽度配置会通过透传属性作用到FormControl上，不管是固定宽度还是fullWidth自适应都能正常生效，不会再出现组件尺寸过小的问题。

内容的提问来源于stack exchange，提问作者Flavio Rocha 2018