无法更改材质ui中文本字段的字体大小

Question

我正在尝试学习材料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 方法。

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

原文由 Omkar 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 "} />

原文由 anonymous_siva 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

更改输入标签和输入文本的字体大小最直接的方法是使用内联样式：

 <TextField
  label="input label name here"
  margin="normal"
  inputProps={{style: {fontSize: 40}}} // font size of input text
  InputLabelProps={{style: {fontSize: 40}}} // font size of input label
/>

原文由 AlienKevin 发布，翻译遵循 CC BY-SA 4.0 许可协议