Текст метки MaterialUI исчезает и не может измениться или выбрать элементы выпадающего меню - PullRequest
Новая
       54

Текст метки MaterialUI исчезает и не может измениться или выбрать элементы выпадающего меню

0 голосов
/ 03 мая 2020

Мне нужно изменить цвет фона выбранного элемента без использования важной. Я нахожу этот пример в github . Но мне нужно создать MuiThemeProvider, чтобы изменить цвет фона выбранного элемента. (На самом деле мне нужно установить его как transparent)

Когда я добавляю MuiThemeProvider в качестве родителя к MenuItem текст метки исчезает, и пользователь не может выбрать один из элементов меню. В консоли я получаю ошибку .

Внимание! Функциональные компоненты не могут быть предоставлены. Попытки получить доступ к этой ссылке потерпят неудачу. Вы хотели использовать 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 пример

1 Ответ

0 голосов
/ 03 мая 2020

Понять. На самом деле мне нужно добавить MuiThemeProvider в качестве родителя к 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>
...