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

Cannot change font size of text field in material ui

提问by Omkar

I am trying to learn material ui. I want to enlarge the text field on my page. However, the styles i embed with the field changes height, width and other properties except the size. Following is my code:

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

Following is the stateless component(React):

以下是无状态组件（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);

I totally understand there is no rocket science as its a straightforward CSS in JS approach of applying styles.

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

However, I cannot override the base font size for my text field. Any help will be appreciated

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

回答by anonymous_siva

As mentioned in the page TextField APIapply styles to the InputProps which applies style to the input element

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

Here is the code

这是代码

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

回答by Carol Chen

I'm on version 3.8.1 and I may have a slightly more straightforward solution.

我使用的是 3.8.1 版，我可能有一个更简单的解决方案。

On TextField

在 TextField

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

However, this may also involve tweaking lineHeightto make it look nicer.

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

回答by AlienKevin

The most straight forward way to change the font size of both the input label and the input text is to use inline styling:

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

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

回答by JayJay

Here's what I had to do to change the size of the text both before (label) and after (input text) the user interacts with the TextField component

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

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

回答by Ayorinde

<TextField inputStyle={styles.textField} />

Here is the full code:

这是完整的代码：

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;

回答by Ashh

Try the with the prop inputStyle

尝试使用道具 inputStyle

inputStyle--> Override the inline-styles of the TextField's input element. When multiLine is false: define the style of the input element. When multiLine is true: define the style of the container of the textarea.

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

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

回答by Julio fils

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