无法更改材质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.

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

Answer 1

如页面TextField API中所述,将样式应用于InputProps,它将样式应用于input元素

这是代码

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

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

Answer 3

我使用的是版本3.8.1，可能有一个更直接的解决方案。

上 TextField

inputProps={{
  style: {fontSize: 15} 
}}

但是，这可能还lineHeight需要进行调整以使其看起来更好。

Answer 4

使用sxprop 和目标输入基类MuiInputBase-input

 <TextField
          sx={{
            '.MuiInputBase-input': { fontSize: '1.25rem' },
          }}
/>