材质UI样式化onFocus Select组件

Question

我正在尝试在Mui中设置选择组件的样式，但无法实现我想要的。我的App.tsx中有一个可以处理不同情况的全局样式，但是我想在此组件中添加特定样式。

这就是我所拥有的：

const useSelectStyles = makeStyles((theme: ITheme) => ({
  root: {
    width: "27rem",
    '& fieldset.Mui-focused': {
      color: 'rgba(0, 0, 0)',
    },
    '& input.Mui-focused': {
      color: 'rgba(0, 0, 0)',
    },
    '& .Mui-focused': {
      color: 'rgba(0, 0, 0)',
    },
    '&.Mui-focused': {
      color: 'rgba(0, 0, 0)',
    },
    '.Mui-focused': {
      color: 'rgba(0, 0, 0)',
    },
  },
  '.Mui-focused': {
    backgroundColor: 'red',
  },
  listbox: {
    padding: '0',
  },
  option: {
    padding: '0.5rem 1rem',
  },
}));

我在这里做错了什么？选择后，背景变为灰色，而我似乎无法将其更改为白色。

Sandbox