在 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样式的方法。

但是，我不能覆盖我的文本字段的基础字体大小。希望能得到任何帮助。

- Omkar

---

你可以尝试使用fontSize: "50px"。 - Hanif

那个不起作用，伙计！:( - Omkar

你是否正在尝试使用Material UI Next？ - Piyush Bhati

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

- noName94

---

我理解的是，属性“input”被设置为对象“classes.resize”，请纠正我如果我错了。我正在使用TypeScript，它似乎告诉我输入应该是一个字符串？ - Numnumberry

它是大写的InputProps。 - aidinism

应该是 input: styles.resize 和 className={styles.textField}。有点令人沮丧的是，您没有正确调用变量。 - Peter Weyand

classes.resize makes sense if myComponent = withStyles(styles)( ( props ) => { ... } ) was used. Then classes is available from const { classes } = props. ` - kca

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

---

但如果使用了带轮廓的TextField，则轮廓将会覆盖一些标签文本。 - Cheng Hui Yuan

Answer 3

我在版本3.8.1上，可能有一个更简单的解决方案。 在TextField上。

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

然而，这也可能涉及微调lineHeight以使其看起来更好。

- Carol Chen

Answer 4

使用sx属性和目标输入框基础类MuiInputBase-input。

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

- kiranvj

---

仅适用于v5+版本 - undefined

Answer 5

以下是我所做的内容，来改变用户与TextField组件交互前（标签）和后（输入文本）文本的大小。

<TextField
  id="MyTextField"
  InputProps={{
    classes: {
      input: classes.formTextInput
    }
  }}
  InputLabelProps={{
    classes: {
      root: classes.formTextLabel
    }
  }}
/>

- JayJay

Answer 6

<TextField inputStyle={styles.textField} />

以下是完整的代码：

import React from 'react';
import TextField from 'material-ui/TextField';

const styles = {
    textField: {
    fontSize: 50, //works!
 }
}

const Searchbox = (props) => {
return (
    <TextField
        onKeyDown={props.onKeyDown}
        id="with-placeholder"
        label="Add id"
        placeholder="id"
        inputStyle={styles.textField}
        margin="normal"
        autoFocus={true}
        helperText={"Add an existing id or select "}
    />
    );
};
export default Searchbox;

- Ayorinde

Answer 7

MUI使用主题来快速为所有元素进行样式设置，可以查看这个有用的工具https://bareynol.github.io/mui-theme-creator/

它允许您了解主题的简单修改将如何影响整个应用程序设计。

- Crypto-Frank

---

虽然这个链接可能回答了问题，但最好在此处包含答案的基本部分并提供参考链接。如果链接页面更改，仅有链接的答案可能会失效。-【来自审查】 - Teymour

Answer 8

<TextField
    type="text"
    className={classes.financing_input}
    placeholder={this.props.CustomerInfoData.phone}
    name="phone"
    id="fixInputSize" //Works 
    onChange={this.handleChange}
/>

//in your css file
#fixInputSize{
  font-family: Roboto;
  font-size: 11px;
}

- Julio fils

Answer 9

如果你使用Sass进行样式设计，你也可以这样做。

<Textfield className="custom-input" />

然后在你的sass文件中编写：

.custom-input {
  width: ....px;

  fieldset { /* settings like border-radius */ }

  input {
    font-size: 1.2rem;
  }
}

- Amir Gorji

Answer 10

尝试使用inputStyle属性

inputStyle --> 覆盖TextField输入元素的内联样式。当multiLine为false时：定义输入元素的样式。当multiLine为true时：定义文本区域容器的样式。

    <TextField
      inputStyle={{ fontSize: "50px" }}
      hintText="Hint Text"
    />

- Ashh

---

请解释一下为什么要给我点踩。这将有助于我改进答案。 - Ashh

inputStyle 不是 TextField 的一个属性: https://material-ui.com/api/text-field/.（或者不再是） - Treycos