Как переопределить определенные классы компонентов реактивного материала

Question

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

Появляется, если root корректно перезаписывается, но другие классы - нет.

Может кто-нибудь объяснить мне, почему мои переопределения классов не применяются правильно к вводу?

const useStyles = makeStyles(theme => ({
  root: {
    width: 275
  },
  outlined: {
    transform: "translate(7px, 10px) scale(1)"
  },
  input: {
    paddingLeft: 7,
    paddingTop: 9.25,
    paddingBottom: 9.25,
    paddingRight: 7
  }
}));

Это визуализированный HTML-код, который я пытаюсь использовать для доступа к переопределениям классов ...

<div class="MuiFormControl-root MuiTextField-root makeStyles-root-387">
    <label
        class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined"
        data-shrink="false"
        for="title-input">Title
    </label>
    <div class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl">
        <fieldset
            aria-hidden="true"
            class="PrivateNotchedOutline-root-445 MuiOutlinedInput-notchedOutline"
            style="padding-left: 54px;">
            <legend class="PrivateNotchedOutline-legend-446" style="width: 0.01px;">
                <span>&#8203;</span>
            </legend>
        </fieldset>
        <input
            aria-invalid="false"
            class="MuiInputBase-input MuiOutlinedInput-input"
            id="title-input"
            type="text"
            value=""></div>
    </div>
</div>

А вот фактический элемент TextField.

<TextField
            classes={{
              ...classes,
              root: classes.root,
              outlined: classes.outlined,
              input: classes.input
            }}
            inputProps={{}}
            id="title-input"
            label="Title"
            variant="outlined"
          />

https://codesandbox.io/s/magical-water-8jspp?fontsize=14&hidenavigation=1&theme=dark