I am currently working on a project where I need a dropdown menu component with specific selections. However, the layout appears to be cramped and I'm struggling to adjust the width.
Additionally, I've been unsuccessful in changing the font size of the "Attributes" text. I attempted using
<FormControl style={{fontSize: 12}} />You can view the sandbox here: https://codesandbox.io/s/busy-matsumoto-gpgwn
The Component
<div className={styles.attributeFields}>
<FormControl variant="outlined">
<InputLabel id="demo-customized-select-label">Attributes</InputLabel>
<Select
labelId="demo-customized-select-label"
id="demo-customized-select"
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem>ID</MenuItem>
<MenuItem>PSA</MenuItem>
<MenuItem>ExternalID</MenuItem>
</Select>
</FormControl>
</div>
And the CSS
.attributeFields {
/* display: inline; */
width: 100% !important;
padding-top: 1.75rem !important;
display: inline-flex !important;
padding-left: 3% !important;
padding-bottom: 1rem !important;
}