Как избежать Material UI Выберите фокус при выборе опции? - PullRequest
Новая
       8

Как избежать Material UI Выберите фокус при выборе опции?

0 голосов
/ 25 июня 2018

Я пытаюсь создать интерфейс с парой Select и Input из библиотеки компонентов Material UI.Я хочу, чтобы текущее поведение моего UI / UX было в следующем порядке: 1. Пользователь выбрал опцию из Select элемента 2. Input будет фокусироваться, когда пользователь выбрал что-то из Select

Вы можете увидетькак это работает (см. вторую Select, потому что первая является нативной Select, и она не подходит для моих целей): https://codesandbox.io/s/l4nq3pjjrm

Первая в приведенном выше примере прекрасно работает,но мне нужен не родной вариант.

Как я могу это сделать?Спасибо.

PS Кроме того, я обнаружил, что есть другие проблемы с этим неправильным поведением Select, посмотрите мой пост на github, чтобы узнать подробности.(https://github.com/mui-org/material-ui/issues/11964)

1 Ответ

0 голосов
/ 13 августа 2018

Итак, если ваша проблема в фокусе после выбора значения, попробуйте это:

1) Импортируйте MuiThemeProvider и создайтеMuiTheme для своего компонента: 

import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';

2) Затем добавьте следующие строки кода после импорта (переопределить css): 

const theme1 = createMuiTheme({
  overrides: {
    MuiSelect: {
      select: {
        "&:focus": {
          background: "$labelcolor"
        }
      }
    }
  }
});

3) И на последнем этапе оберните ваш компонент, который вы хотите редактировать, следующим кодом: 

<MuiThemeProvider theme={theme1}>

// Your Component here

</MuiThemeProvider>

Я применил его к вашему коду здесь

...