在 React Material-Table 中增加 select 查找框的宽度

Question

我在 React 中使用 Material-Table 并尝试增加 'Requirement' 字段中此 'lookup' 列的宽度。我试过 cellStyle: {columnWidth: 800}。另外，尝试了宽度，填充。 None 似乎可以做到这一点。我已经检查了文档和其他一些地方，但无法解决这个问题。感谢知道如何进行此更改的任何人。

enter code here

const [columns] = useState([
    { title: 'Skills', field: 'type' },
    { cellStyle: {columnWidth: 800}, title: 'Requirement', field: 'mustHave', lookup: {34: 'Required', 63: 'Must-have'} /*initialEditValue: 'initial edit value'*/ },
    { cellStyle: {textAlign: 'left'}, headerStyle: {textAlign: 'left'}, title: 'Desired Rating', field: 'desiredRating', 
    editComponent: (props) => (
        <Input 
          defaultValue={props.value} 
          onChange={(e) => props.onChange(e.target.value)} 
          type="number"
          min="0"
          max="10"
          onInput={maxLengthCheck} 
        /> 
    )
     }
]);

const [data, setData] = useState([]);

useEffect(() => {
    setData(workExp);
  }, [workExp]);
  console.log(workExp);
return (
    <MaterialTable
    style={{fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', fontSize: '0.875rem', textAlign: 'left'}}
    title="Hiring Criteria"
    columns={columns}
    options={{actionsColumnIndex: -1}}
    data={data}
    editable={{
        onRowAdd: newData =>
        new Promise((resolve, reject) => {
            setTimeout(() => {
            setData([...data, newData]);
            
            resolve();
            }, 1000)
        }),
        onRowUpdate: async (newData, oldData) => {
            try {
                const index = oldData.tableData.id;
                let newWorkExp = [...workExp];
                newWorkExp[index] = newData;
                console.log(data);
                console.log(newWorkExp[index].mustHave === '63');
                if(newWorkExp[index].mustHave === '63' || newWorkExp[index].mustHave === 'Must-have') {
                    newWorkExp[index].mustHave = 'Must-have';
                }
                
                console.log(newWorkExp);
                setData(newWorkExp);
                await dispatch(updateRequisition(id, {workExp: newWorkExp}));
                await wait(1000);
            } catch (err) {
                console.error(err);
          }
            
        },
        onRowDelete: oldData =>
        new Promise((resolve, reject) => {
            setTimeout(() => {
            const dataDelete = [...data];
            const index = oldData.tableData.id;
            dataDelete.splice(index, 1);
            setData([...dataDelete]);
            
            resolve()
            }, 1000)
        }),
    }}
    />
)
}

export default HiringCriteria;

Answer 1

能够解决这个问题。使用浏览器工具获取 class 名称并使用 !important 创建样式表以覆盖样式。

在 React Material-Table 中增加 select 查找框的宽度

Increase width of select lookup box in React Material-Table

reactjs

material-ui

material-table