如何自定义 TextField 的边距、内边距和字体大小

Posted 2023-02-22

【中文标题】如何自定义 TextField 的边距、内边距和字体大小

【英文标题】：How to customize the margin, padding and fontsize of a TextField

【发布时间】：2020-03-16 23:06:03

【问题描述】：

我正在尝试自定义 TextField 的字体大小、边距和填充以使其看起来更大。请您指导我如何自定义它。我尝试使用 className 对其进行自定义，但插入文本出现在大纲之外。

https://stackblitz.com/edit/react-ad24ce

【参考方案1】：

您可以尝试通过标准样式编辑 Textfield 的宽度，并且可以通过 prop InputProps 修改高度和文本大小。边距和填充将简单地移动 DOM 周围的文本字段。就大小而言，Textfield 样式会是这样的：

const useStyles = makeStyles(theme => (
  // ...
  textField: 
    width: 500 // or width of choice
    // margin: if needed
    // padding: if needed
  ,
  resize: 
    fontSize: 50 // or size of choice
  
));

以及文本字段上的InputProps：

    <TextField
      required
      id="standard-required"
      label="Required"
      defaultValue="Hello World"
      className=classes.textField
      margin="normal"
      variant="outlined"
      fullWidth=true
      InputProps=
        classes: 
          input: classes.resize,
        
      
    />