Material UI 标签文本消失，无法更改或选择下拉菜单元素

Question

我需要更改所选项目的背景颜色而不使用 important.I 在 github 中找到此示例。但我需要创建 MuiThemeProvider 来更改所选元素的背景颜色。（其实我需要设置成transparent）

当我将 MuiThemeProvider 作为父级添加到 MenuItem 时，标签文本消失并且用户无法选择菜单 element.In 控制台之一，我收到错误消息。

警告：函数组件不能被赋予引用。尝试访问此 ref 将失败。您是要使用 React.forwardRef() 吗？

<FormControl className={classes.formControl}>
    <Select
      id="demo-simple-select"
      displayEmpty
      value={age}
      onChange={handleChange}
    >
      <MuiThemeProvider theme={theme}>
        <MenuItem value={10}>Ten</MenuItem>
        <MenuItem value={20}>Twenty</MenuItem>
        <MenuItem value={30}>Thirty</MenuItem>
      </MuiThemeProvider>
    </Select>
</FormControl>

和theme代码

const theme = createMuiTheme({
  overrides: {
    MuiMenuItem: {
      root: {
        "&$selected": {
          backgroundColor: "red"
        }
      }
    }
  }
});

Codesandbox 例子

Answer 1

图 out.Actually 我需要将 MuiThemeProvider 作为 parent 添加到 FormControl 而不是 MenuItem。也许这个答案对某人有帮助。

Codesandbox

<MuiThemeProvider theme={theme}>
  <FormControl className={classes.formControl}>
    <Select
      id="demo-simple-select"
      displayEmpty
      value={age}
      onChange={handleChange}
    >
      <MenuItem value={10}>Ten</MenuItem>
      <MenuItem value={20}>Twenty</MenuItem>
      <MenuItem value={30}>Thirty</MenuItem>
    </Select>
  </FormControl>
</MuiThemeProvider>

Material UI 标签文本消失，无法更改或选择下拉菜单元素

MaterialUI label text disappearing and can not change or choose dropdown menu elements

mui

reactjs

material-ui