reactjs - MaterialUI标签文本消失且无法更改或选择下拉菜单元素

Question

我需要在不使用重要的情况下更改所选项目的背景颜色。我在github中找到了这个示例。但是我需要创建MuiThemeProvider来更改所选元素的背景颜色。（实际上我需要将其设置为transparent）

当我添加MuiThemeProvider为父MenuItem标签文本消失并且用户无法选择菜单元素之一时。在控制台中出现错误。

警告：不能给函数组件提供参考。尝试访问此 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"
        }
      }
    }
  }
});

代码沙盒示例

Answer 1

弄清楚。实际上，我需要添加MuiThemeProvider为父母而FormControl不是MenuItem。也许这个答案对某人有所帮助。

代码沙盒

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