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