MUI Select Component Padding (ReactJS)

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

If you don't want to change the global css, you could overwrite children of a given element like so:

<Select
 sx={{
   '& .MuiSelect-select': {
      paddingRight: 4,
      paddingLeft: 2,
      paddingTop: 1,
      paddingBottom: 1,
   }
 }}
>

Answer 2

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 }}
>