Currently, I am facing an issue with the Material UI Select component where I am trying to decrease the padding within the element. The padding seems to be a property of one of the subclasses .MuiOutlinedInput-input, but my attempts to change the padding have been unsuccessful despite using the standard sx approach.
Edit: Fortunately, I managed to find a solution that works. Please refer to my post in the solutions thread for details.
Below is the initial code snippet for the component:
import { Select, MenuItem } from '@material-ui/core';
<Select
id="time-period-select"
value={timeline}
onChange={handleTimelineChange}
variant="outlined"
>
<MenuItem value={10}>All Time</MenuItem>
<MenuItem value={20}>This Year</MenuItem>
<MenuItem value={30}>This Month</MenuItem>
<MenuItem value={40}>This Week</MenuItem>
<MenuItem value={50}>Today</MenuItem>
</Select>
And here is my attempt at removing the padding (with various failed attempts):
<Select
...
sx={p: 0, '& .MuiOutlinedInput-input': {p: 0}}
>
Any assistance on this matter would be highly appreciated. Thank you!
Side Note:
I am also looking to customize the component further (e.g., changing the background color), but it seems like this modification isn't working either. If you have any suggestions or a general approach for customizing the Select component, I would love to hear them :)