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

【问题标题】：Cannot change font size of text field in material ui无法更改材质ui中文本字段的字体大小
【发布时间】：2018-10-23 11:53:48
【问题描述】：

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

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

【问题讨论】：

你可以试试 fontSize: "50px"
那行不通！ :(
接下来你要试试material ui吗？？

标签： css reactjs material-ui

【解决方案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 "}/>

【讨论】：

如果我错了，请纠正我，属性“input”被设置为对象“classes.resize”？我正在使用打字稿，它似乎告诉我输入需要一个字符串？
是大写的 InputProps
这应该是input: styles.resize 和classNam={styles.textField}。您没有正确调用变量，这有点令人沮丧。
如果使用了myComponent = withStyles(styles)( ( props ) => { ... } )，classes.resize 是有意义的。然后classes 可从const { classes } = props 获得。 `

【解决方案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
/>

【讨论】：

但是如果使用外框TextField，外框会覆盖一些标签文字

【解决方案3】：

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

开启TextField

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

但是，这也可能涉及调整 lineHeight 以使其看起来更好。

【讨论】：

【解决方案4】：

在用户与 TextField 组件交互之前（标签）和之后（输入文本），我必须这样做来更改文本的大小

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

尝试使用道具inputStyle

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

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

【讨论】：

请解释投反对票的原因。这将帮助我改进答案
inputStyle 不是 TextField 的道具：material-ui.com/api/text-field。（或者不再）

【解决方案7】：

<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;
}

【讨论】：

【解决方案8】：

如果您使用 sass 进行样式设置，您也可以这样做。

<Textfield className="custom-input" />

然后在你的 sass 中写：

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

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

  input {
    font-size: 1.2rem;
  }
}

【讨论】：