Increase width of select lookup box in React Material-Table

Question

I am using Material-Table in React and trying to increase the width of this 'lookup' column in 'Requirement' field. I have tried cellStyle: {columnWidth: 800}. Also, tried width, padding. None seem to accomplish this. I've checked through the documentation, and a few other places, but not able to resolve this. Appreciate anyone who knows how to make this change.

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

Was able to resolve this. Used browser tools to get class name and created stylesheet using !important to override styles.