MUI Select Component Padding (ReactJS) - css

Question

I have a Material UI Select component and am trying to reduce the padding within the element. The padding appears to be a property of one of the subclasses .MuiOutlinedInput-input. However, I haven't been able to change the padding despite setting it to zero using the standard sx approach.
Edit: I was able to find a working solution, see my post in the solutions thread.
Here is the base code 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>
Here is my attempt to remove the padding (I have tried several variations of this):
<Select
...
sx={p: 0, '& .MuiOutlinedInput-input': {p: 0}}
>
Any help would be greatly appreciated. Thanks!
Side Note:
I would like to further customize the component (ex. changing the background color) which doesn't seem to work either, so if you have a general approach for customizing the Select component that would be great :)

Answer 1

After tinkering around some more and looking at MUI Treasury, I was able to arrive at a solution. The following is the correct approach:
const useStyles = makeStyles(() => ({
select: {
background: '#F5F6F9',
paddingLeft: 24,
paddingTop: 14,
paddingBottom: 15,
...
},
}));
...
const classes = useStyles();
<Select
...
disableUnderline
classes={{ root: classes.select }}
>