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

【问题标题】：How to customize the margin, padding and fontsize of a TextField如何自定义 TextField 的边距、内边距和字体大小
【发布时间】：2020-03-16 23:06:03
【问题描述】：

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

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

【问题讨论】：

标签： reactjs material-design material-ui

【解决方案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,
        }
      }}
    />

【讨论】：