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

问题描述

我正在做我的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>

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

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

解决方法

如果您要修改实际输入的填充，则InputProps className属性以输入的包装为目标，

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

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

material-ui reactjs reactjs