如何缩短材质ui中Textfield中的边框和文本之间的距离答案

【问题标题】：how to shorten the distance between the border and text in Textfield in material ui如何缩短材质ui中Textfield中的边框和文本之间的距离
【发布时间】：2023-03-26 21:05:01
【问题描述】：

My UI look like this

我正在做我的 Reactjs 项目并与材料 ui Textfield 决斗。我用过

const styles = theme => ({
    input: {
        width: 30,
        height:30,
        marginTop:10,
        fontSize:7,
        padding:0,
    },
})

为我的文本字段设置样式

<span>Size &nbsp;</span>
<span style={{marginTop:'10px'}}>
  <TextField 
      InputProps={{
          className: classes.input
      }} 
      variant="outlined" />
</span>

但由于我的文本字段很小，我的文本可以显示在边框内。我认为原因是边框和文本之间的距离太大。有什么办法可以缩短距离吗？或任何帮助我在文本字段中显示文本的解决方案。我尝试了填充，但它不起作用。

任何答案将不胜感激。非常感谢！

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

InputProps className prop 的目标是输入的包装器，如果您想修改实际输入的填充，请执行此操作

inputWrapper: {
    width: 30,
    height: 30,
    marginTop: 10,
    fontSize: 7,
    "& input": {
      padding: 0
    }
  }

<TextField 
      InputProps={{
          className: classes.inputWrapper
      }} 
      variant="outlined" />

【讨论】：