React Material-Table如何增大lookup列的选择下拉框宽度

你之前配置的cellStyle仅作用于单元格的非编辑展示状态，lookup列的下拉选择框是编辑态下的独立组件，不受该属性控制，所以调整不生效，可通过以下两种方案实现宽度修改：

方案1：自定义lookup编辑组件（最可控，推荐） #

直接在Requirement字段的配置中自定义editComponent，手动实现下拉选择逻辑，完全自定义宽度：

// 首先引入依赖组件
import { Select, MenuItem } from '@material-ui/core';

const [columns] = useState([
    { title: 'Skills', field: 'type' },
    { 
      title: 'Requirement', 
      field: 'mustHave', 
      lookup: {34: 'Required', 63: 'Must-have'},
      // 新增自定义编辑组件
      editComponent: (props) => (
        <Select
          style={{ width: 800 }} // 这里设置你需要的宽度即可
          value={props.value || ''}
          onChange={(e) => props.onChange(e.target.value)}
        >
          {Object.entries(props.columnDef.lookup).map(([key, label]) => (
            <MenuItem key={key} value={key}>
              {label}
            </MenuItem>
          ))}
        </Select>
      )
    },
    // 其他字段配置保持不变
]);

方案2：CSS样式覆盖 #

如果不想修改组件逻辑，可以通过CSS强制修改默认下拉框宽度，不会影响其他业务模块的组件样式：

1. 先给MaterialTable组件添加自定义类名：

<MaterialTable
  className="hiring-criteria-table"
  style={{fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', fontSize: '0.875rem', textAlign: 'left'}}
  // 其他原有配置保持不变
/>

2. 添加对应CSS规则：

.hiring-criteria-table .MuiTableCell-root .MuiSelect-root {
  min-width: 800px !important;
}

内容的提问来源于stack exchange，提问作者Mr. K