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

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

0 个答案: