css - 无法更改 Material ui中文本字段的字体大小

Question

我正在努力学习 material ui。我想放大页面上的文本字段。但是，我在字段中嵌入的样式会更改高度、宽度和除大小之外的其他属性。以下是我的代码:

const styles = {
container: {
    display: 'flex',
    flexWrap: 'wrap',
},
textField: {
    // marginLeft: theme.spacing.unit,
    // marginRight: theme.spacing.unit,
    width: 300,
    margin: 100,
    fontSize: 50 //??? Doesnt work
}
}

无状态组件(React)如下:

const Searchbox = (props) => {

    const { classes } = props;

    return (
        <TextField
            onKeyDown={props.onKeyDown}
            id="with-placeholder"
            label="Add id"
            placeholder="id"
            className={classes.textField}
            margin="normal"
            autoFocus={true}
            helperText={"Add an existing id or select "}
        />
    );
};

export default withStyles(styles)(Searchbox);

我完全理解没有火箭科学，因为它是一种在 JS 中应用样式的简单 CSS 方法。

但是，我无法覆盖我的文本字段的基本字体大小。任何帮助将不胜感激

Answer 1

页面中提到TextField API将样式应用于将样式应用于输入元素的 InputProps。

代码如下:

const styles = {
  container: {
    display: 'flex',
    flexWrap: 'wrap',
  },
  textField: {
    width: 300,
    margin: 100,
  },
  //style for font size
  resize:{
    fontSize:50
  },
}

<TextField
  id="with-placeholder"
  label="Add id"
  placeholder="id"
  InputProps={{
    classes: {
      input: classes.resize,
    },
  }}
  className={classes.textField}
  margin="normal"
  autoFocus={true}
  helperText={"Add an existing id or select "} />