webentwicklung-frage-antwort-db.com.de

Die Schriftgröße des Textfelds in Material ui kann nicht geändert werden

Ich versuche Material ui zu lernen. Ich möchte das Textfeld auf meiner Seite vergrößern. Die mit dem Feld eingebetteten Stile ändern jedoch Höhe, Breite und andere Eigenschaften mit Ausnahme der Größe. Folgendes ist mein Code:

const styles = {
container: {
    display: 'flex',
    flexWrap: 'wrap',
},
textField: {
    // marginLeft: theme.spacing.unit,
    // marginRight: theme.spacing.unit,
    width: 300,
    margin: 100,
    fontSize: 50 //??? Doesnt work
}
}

Folgendes ist die zustandslose Komponente (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);

Ich verstehe voll und ganz, dass es keine Raketenwissenschaft gibt, da es ein direkter CSS-Ansatz für die Verwendung von Stilen ist.

Ich kann jedoch nicht die Grundschriftgröße für mein Textfeld überschreiben. Jede Hilfe wird geschätzt

cssreactjsmaterial-ui
7
Omkar

Wie auf der Seite TextField API Stile auf die InputProps-Elemente angegeben, wird der Stil auf das Eingabeelement angewendet

Hier ist der 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 "}/>

13
anonymous_siva

Die einfachste Möglichkeit, die Schriftgröße sowohl des Eingabeetiketts als auch des Eingabetexts zu ändern, besteht in der Verwendung des Inline-Stils:

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

Edit QuizMaker

2
AlienKevin

Ich bin auf Version 3.8.1 und habe vielleicht eine etwas einfachere Lösung. 

Ein TextField 

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

Dies kann jedoch auch die Anpassung von lineHeight beinhalten, damit es schöner aussieht. 

2
Carol Chen

Versuchen Sie es mit der Stütze inputStyle

inputStyle -> Überschreibt die Inline-Styles der Eingabe von TextField Element. Wenn multiLine den Wert false hat: Definieren Sie den Stil der Eingabe Element. Wenn multiLine den Wert true hat: Definieren Sie den Stil des Containers von die textarea.

    <TextField
      inputStyle={{ fontSize: "50px" }}
      hintText="Hint Text"
    />
1
Anthony Winzlet
<TextField inputStyle={styles.textField} />

Hier ist der vollständige 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;
1
Ayorinde

Ich musste Folgendes tun, um die Größe des Texts vor (Label) und nach (Eingabetext) zu ändern. Der Benutzer interagiert mit der TextField-Komponente

<TextField
  id="MyTextField"
  InputProps={{
    classes: {
      input: classes.formTextInput
    }
  }}
  InputLabelProps={{
    classes: {
      root: classes.formTextLabel
    }
  }}
/>
0
JayJay
<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;
}
0
Julio fils