Как изменить размер шрифта автозаполнения UI материала?

Question

Я пытаюсь применить пользовательский css к компоненту автозаполнения пользовательского интерфейса материала. В частности, я хочу изменить размер шрифта поля ввода. Вот что у меня есть прямо сейчас:

<Autocomplete
  style={{
    width: 200,
    height: 60,
    marginLeft: 15,
  }}
  options={["foo", "bar"]}
  renderInput={(params) => (
    <TextField
      InputProps={{ style: { fontSize: 30 } }}
      {...params}
      margin="normal"
    />
  )}
/>

Я считаю, что мой TextField правильно оформлен, но его CSS перезаписывается функцией автозаполнения CSS. Любая помощь приветствуется. Заранее спасибо.

Answer 1

Вы можете попробовать 2 из этих вещей,

1. Поменяйте местами эти две строки

InputProps={{ style: { fontSize: 30 } }}
{...params}

на

{...params}
InputProps={{ style: { fontSize: 30 } }}

Это потому, что второй {...params} отменяет InputProps.

Вы можете изменить Inputprops CSS с помощью маркера !important следующим образом:

InputProps={{ style: { fontSize: `30 !important` } }}