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