javascript - 删除来自 Material ui 的文本框的填充

Question

我正在尝试从文本框中删除填充，但问题是它来自 Material UI。

我为所有类设置了 padding 0，但 padding 仍然没有被移除。

你能告诉我如何删除这个填充吗？

.MuiOutlinedInput-input-1708 {
    padding: 18.5px 14px;
}

这是我的代码和一个沙箱:

https://codesandbox.io/s/m58841kkwp

cssLabel: {
    "&$cssFocused": {
      color: { borderColor: "red", padding: 0 }
    }
  },
  cssFocused: { borderColor: "red", padding: 0 },
  cssUnderline: {
    "&:after": {
      borderBottomColor: "red",
      padding: 0
    }
  },
  // cssOutlinedInput: {
  //   "&$cssFocused $notchedOutline": {
  //     borderColor: "green"
  //   }
  // },

  cssOutlinedInput: {
    "& $notchedOutline": {
      //add this nested selector
      borderColor: "red",
      padding: 0
    },

    "&$cssFocused $notchedOutline": {
      borderColor: "green",
      padding: 0
    }
  },

  notchedOutline: { borderColor: "red", padding: 0 },

Answer 1

如果您阅读 docs您可以找到将属性应用于 native 输入元素的 inputProps(不是 InputProps)属性。如下所示，您可以传递样式属性。

<TextField
    inputProps={{
       style: {
         padding: 5
       }
    }}
/>