reactjs - 如何覆盖特定类别的反应材料组件

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

标签： reactjsmaterial-ui