Material-UIのSelect内のテキスト部分のスタイルをいじる

したいこと

Material-UIのSelectコンポーネント内にあるテキスト部分のスタイルを変更したかった。 具体的には、下図のようにテキストエリアの範囲を縮小したかった。

変更前

変更後

タグ構造

Select周りの構造は下記の通りになっているとする。 今回「ここから〜ここまで」で囲まれている範囲のスタイルを変更することを目的とした。 該当部分のReactコンポーネントも記載しているが、jsx用のシンタックスハイライトを当てていないので、雰囲気でおなしゃす。

<div class="MuiInputBase-root MuiOutlinedInput-root makeStyles-statusMenu-16">
  <!-- ここから -->
  <div
    class="MuiSelect-root MuiSelect-select MuiSelect-selectMenu MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input"
    tabindex="0"
    role="button"
    aria-haspopup="listbox"
    aria-labelledby="demo-simple-select-filled"
    id="demo-simple-select-filled"
  >
    未着手
  </div>
  <!-- ここまで -->
  <input
    aria-hidden="true"
    tabindex="-1"
    class="MuiSelect-nativeInput"
    value="waiting"
  /><svg
    class="MuiSvgIcon-root MuiSelect-icon MuiSelect-iconOutlined"
    focusable="false"
    viewBox="0 0 24 24"
    aria-hidden="true"
  >
    <path d="M7 10l5 5 5-5z"></path>
  </svg>
  <fieldset
    aria-hidden="true"
    class="PrivateNotchedOutline-root-29 MuiOutlinedInput-notchedOutline"
    style="padding-left: 8px"
  >
    <legend class="PrivateNotchedOutline-legend-30" style="width: 0.01px">
      <span><200b></span>
    </legend>
  </fieldset>
</div>

<Select
  id="demo-simple-select-filled"
  value={task.status}
  variant="outlined"
  className={classes.statusMenu}
>
  <MenuItem value="waiting">未着手</MenuItem>
  <MenuItem value="working">作業中</MenuItem>
  <MenuItem value="completed">完了</MenuItem>
  <MenuItem value="pending">保留</MenuItem>
</Select>

方法

MenuItemのinput部分のMuiOutlinedInput-inputに対してスタイルを設定する

statusMenu: {
  '& .MuiOutlinedInput-input': {
    paddingBottom: '7px',
      paddingTop: '7px',
    },
},