MUI Select 组件填充 (ReactJS)

Question

我有一个 Material UI Select组件，我正在尝试减少元素内的填充。 填充似乎是子类之一的属性.MuiOutlinedInput-input 。 但是，尽管使用标准sx方法将填充设置为零，但我无法更改填充。

编辑：我能够找到一个可行的解决方案，请参阅我在解决方案线程中的帖子。

这是组件的基本代码：

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>

这是我尝试删除填充的尝试（我尝试了几种变体）：

<Select
  ...
  sx={p: 0, '& .MuiOutlinedInput-input': {p: 0}}
>

任何帮助将不胜感激。 谢谢！

旁注：我想进一步自定义似乎也不起作用的组件（例如更改背景颜色），因此，如果您有自定义Select组件的通用方法，那就太好了:)

Answer 1

在进行了更多修改并查看了MUI Treasury之后，我找到了一个解决方案。 以下是正确的做法：

const useStyles = makeStyles(() => ({
  select: {
    background: '#F5F6F9',
    paddingLeft: 24,
    paddingTop: 14,
    paddingBottom: 15,
    ...
  },
}));

...

const classes = useStyles();

<Select
  ...
  disableUnderline
  classes={{ root: classes.select }}
>