Question

我试图自定义TextField的fontsize，margin和padding以使其更大。您能指导我如何自定义它吗？我尝试使用className对其进行自定义，但插图文本出现在轮廓之外。

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

Answer 1

您可以尝试通过标准样式编辑Textfield的宽度，并且高度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,
        }
      }}
    />

如何自定义TextField的边距，填充和字体大小

1 个答案: