- Is there a way to increase the width of the drop down to 400px?
- I tried adding inline styles, but it didn't work.
- Upon debugging, I realized that the width is being overridden by this class.
- I'm not sure how to overwrite it.
- Could you please provide a solution to fix this issue?
- Below is a snippet of my code:
https://stackblitz.com/edit/react-4xmiuz?file=demo.js
<div style={{ width: '400', border: '1px solid green' }}
className={classes.root}>
<FormControl style={{ width: '400', border: '1px solid green' }}
variant="outlined" className={classes.formControl}>
<InputLabel
ref={ref => {
this.InputLabelRef = ref;
}}
htmlFor="outlined-age-native-simple"
style={{ width: '400', border: '1px solid green' }}
>
Age
</InputLabel>
<Select
native
value={this.state.age}
onChange={this.handleChange('age')}
style={{ width: '400 !important', border: '1px solid red' }}
input={
<OutlinedInput
name="age"
labelWidth={this.state.labelWidth}
id="outlined-age-native-simple"
style={{ width: '400', border: '1px solid green' }}
/>
}
>
<option style={{ width: '400', border: '1px solid green' }}
value="" />
<option style={{ width: '400', border: '1px solid green' }}
value={10}>Ten</option>
<option style={{ width: '400', border: '1px solid green' }}
value={20}>Twenty</option>
<option style={{ width: '400', border: '1px solid green' }}
value={30}>Thirty</option>
</Select>
</FormControl>
</div>