remove padding of the textbox which comes from material ui

Question

I am trying to remove the padding from a textbox but the problem is it's coming from the Material UI.

I gave padding 0 for all the classes but padding is still not getting removed.

Can you tell me how to remove this padding?

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

Here is my code and a sandbox:

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

如果您阅读文档，您可以找到将属性应用于本机输入元素的 inputProps（而不是 InputProps）属性。如下所示，您可以传递一个样式属性。

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

Answer 2

如果有人在 2022 年阅读这篇文章（使用@mui/material），那么最上面的答案对我来说不起作用，varient="outline"因为删除输入填充不会导致标签正确偏移。

size="small"我最终通过将道具添加到 TextField 来删除填充（并且标签大小正确） 。所以：

<TextField
   size="small"
/>

不幸的是，这不支持更改实际的填充大小，但查看源代码以了解其工作原理可能会揭示如何做到这一点。

Answer 3

解决这个问题的一种方法可能是创建一个有用的类并覆盖材质文本字段的样式。这样你就可以重复使用它

我留下示例 https://stackblitz.com/edit/react-textfield-without-padding

注意：作为示例，我为其留了 5 像素的内边距，以使其看起来更好。您可以自定义它，这样就没有填充

有用的资源

• https://reactjs.org/docs/faq-styling.html
• https://codeburst.io/4-four-ways-to-style-react-components-ac6f323da822