web-dev-qa-db-fra.com

Impossible de changer la taille de la police du champ de texte dans le matériau ui

J'essaie d'apprendre du matériel ui. Je veux agrandir le champ de texte sur ma page. Cependant, les styles que j’incorpore avec le champ changent de hauteur, de largeur et d’autres propriétés que la taille. Voici mon 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
}
}

Voici le composant sans état (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);

Je comprends tout à fait qu’il n’existe aucune science de fusée, c’est une approche simple de CSS dans l’application de styles.

Cependant, je ne peux pas remplacer la taille de la police de base de mon champ de texte. toute aide serait appréciée

cssreactjsmaterial-ui
7
Omkar

Comme mentionné dans la page API TextField appliquer des styles à InputProps, qui applique un style à l'élément d'entrée

Voici le 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

Je suis sur la version 3.8.1 et j'ai peut-être une solution un peu plus simple. 

Sur TextField 

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

Cependant, cela peut aussi impliquer de modifier lineHeight pour le rendre plus beau. 

2
Carol Chen

Essayez le avec l'accessoire inputStyle

inputStyle -> Remplace les styles en-ligne de l'entrée de TextField élément. Lorsque multiLine est false: définissez le style de l'entrée élément. Lorsque multiLine est true: définissez le style du conteneur de la textarea.

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

Voici le code complet: 

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

Voici ce que je devais faire pour modifier la taille du texte à la fois avant (étiquette) et après (texte d'entrée), l'utilisateur interagit avec le composant TextField

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