MUI Изменение css метки выбора и цвета выбранной опции

Question

Я несколько дней борюсь с MUI компонентами, создавая страницу в приложении React.

Я почти закончил, пропало всего 2 вещи ...

Я использую Выбор и Автозаполнение на моей странице. В обоих из них я установил {shrink=false} для метки ввода, но я не знаю, как применить display:none после выбора опции (например, вместо сокращения просто исчезают - теперь они перекрываются сверху друг друга - я не знаю, почему это не так по умолчанию, когда усадка имеет значение false ...).

Кроме того, в компоненте select мне нужен цвет выбранного параметр должен быть белым, когда он находится внутри входного текста (вместо метки - теперь вместе с ним ... - теперь он черного цвета).

Кто-нибудь может мне помочь? Или, по крайней мере, указывает мне направление, куда смотреть?

Я просматриваю документацию, но не могу найти способ. Должен ли я что-то сделать, когда вызывается метод handleChange? - Это момент ... но тогда, как изменить свой стиль?

Спасибо всем, кто может помочь ххх

Answer 1

Я решил это, используя состояние:

const [selected, setSelected] = useState(false);

В компоненте <Select>:

onChange={(event) => {
  setSelected(true);
  handleChange(event);
}}

А затем я установил значение метки ввода в виде строки ИЛИ выбранный вариант:

<InputLabel
  ref={inputLabel}
  className={classes.inputLabel}
  id="simple-select-label"
  shrink={false}
>
  {selected ? '' : 'Itinerario'}
</InputLabel>

Надеюсь кому-нибудь помочь. х