Невозможно изменить размер шрифта текстового поля в интерфейсе материала.

Question

Я пытаюсь выучить материал. Я хочу увеличить текстовое поле на моей странице. Однако стили, которые я встраиваю в поле, изменяют высоту, ширину и другие свойства, кроме размера. Вот мой код:

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

Я полностью понимаю, что нет ракетостроения, так как это простой CSS в JS подходе к применению стилей.

Однако я не могу переопределить базовый размер шрифта для моего текстового поля. Любая помощь будет оценена

Answer 1

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

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

Вот что мне нужно было сделать, чтобы изменить размер текста как до (метка), так и после (ввод текста), когда пользователь взаимодействует с компонентом TextField

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

Answer 5

Попробуйте с опорой inputStyle

inputStyle -> Переопределить встроенные стили элемента ввода TextField.Когда multiLine имеет значение false: определить стиль элемента ввода.Когда multiLine имеет значение true: определить стиль контейнера текстовой области.

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

Answer 6

Как упомянуто на странице 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 "}/>

Answer 7

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