web-dev-qa-db-fra.com

Comment puis-je modifier la taille de l'étiquette d'un matériau de texte UI?

J'ai un champ de texte défini comme suit:

<TextField
  id="standard-with-placeholder"
  label="First Name"
  className={classes.textField}
  margin="normal"
/>

Et ça ressemble à ceci:

enter image description here

Mais je veux que ça ressemble à ceci:

enter image description here

Le texte "prénom" est plus grand. Comment puis-je régler la taille du texte d'étiquette? Actuellement, mon objet styles est vide. Je pense que cela devrait être où le CSS à faire cela devrait aller, mais je ne suis pas sûr à quoi ressemblerait la CSS pour le texte de l'étiquette.

Merci

javascriptcssreactjsmaterial-uitextfield
5
intA

Voici un exemple de comment modifier la taille de la police d'étiquette. Cet exemple modifie également la taille de la police de l'entrée sur l'hypothèse que vous voudriez que ces tailles soient synchronisées, mais vous pouvez jouer avec cela dans le bac à sable pour voir les effets du changement d'une ou d'une autre.

import React from "react";
import ReactDOM from "react-dom";

import TextField from "@material-ui/core/TextField";
import { withStyles } from "@material-ui/core/styles";

const styles = {
  inputRoot: {
    fontSize: 30
  },
  labelRoot: {
    fontSize: 30,
    color: "red",
    "&$labelFocused": {
      color: "purple"
    }
  },
  labelFocused: {}
};
function App({ classes }) {
  return (
    <div className="App">
      <TextField
        id="standard-with-placeholder"
        label="First Name"
        InputProps={{ classes: { root: classes.inputRoot } }}
        InputLabelProps={{
          classes: {
            root: classes.labelRoot,
            focused: classes.labelFocused
          }
        }}
        margin="normal"
      />
    </div>
  );
}
const StyledApp = withStyles(styles)(App);
const rootElement = document.getElementById("root");
ReactDOM.render(<StyledApp />, rootElement);

Edit TextField label

Voici les parties pertinentes de la documentation:

5
Ryan Cogswell