8

I have a TextField defined as follows:

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

And it looks like this:

enter image description here

But I want it look like this:

enter image description here

The "First Name" text is larger. How can I adjust the label text size? Currently my styles object is empty. I think that should be where the CSS to do this should go, but I'm unsure what the css would look like for the label text.

Thanks

intA
  • 2,513
  • 12
  • 41
  • 66
  • are you sure it's not a the ```placeholder ``` that you should change the style ? i see a label props but can you show us what's the html render too – Aziz.G Feb 04 '19 at 23:09

2 Answers2

18

Here's an example of how to modify the label font size in v4 of Material-UI (v5 example further down). This example also modifies the font-size of the input on the assumption that you would want those sizes to be in sync, but you can play around with this in the sandbox to see the effects of changing one or the other.

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

Below is an equivalent example for v5 of Material-UI using styled instead of withStyles:

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

import MuiTextField from "@material-ui/core/TextField";
import { inputClasses } from "@material-ui/core/Input";
import { inputLabelClasses } from "@material-ui/core/InputLabel";
import { styled } from "@material-ui/core/styles";

const TextField = styled(MuiTextField)(`
  .${inputClasses.root} {
    font-size: 30px;
  }
  .${inputLabelClasses.root} {
    font-size: 30px;
    color: red;
    &.${inputLabelClasses.focused} {
      color: purple;
    }
  }
`);
function App() {
  return (
    <div className="App">
      <TextField
        id="standard-with-placeholder"
        label="First Name"
        margin="normal"
        variant="standard"
      />
    </div>
  );
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Edit TextField label

Here are the relevant parts of the documentation:

Ryan Cogswell
  • 75,046
  • 9
  • 218
  • 198
  • 1
    This doesn't seem to do anything. I think the CSS from a custom bootstrap version that's being used in the project may be overriding it. How can I add !important when defining CSS in javascript like this? – intA Feb 05 '19 at 01:20
  • 1
    Your question about "!important" has been answered [here](https://stackoverflow.com/questions/54526725/how-do-you-add-important-to-a-css-in-js-jss-class-property/54526792#54526792). I'll warn that you are likely to encounter a lot of annoying issues trying to get the Material-UI components to look correct if you are battling a lot of global styles bleeding in. – Ryan Cogswell Feb 05 '19 at 04:59
  • @RyanCogswell appreciate the above. Do you know how to prevent the label from wrapping in a full width text box? It's wrapping after ~45 characters and I want to override that default. I'm on v4x of Material and can't upgrade for a few months. – Jay J Feb 28 '22 at 12:52
  • @JayJ Please create a separate question including a sandbox reproducing your problem. I do have an approach in my own code for dealing with labels that would otherwise wrap, but it is more involved than what I can explain in a comment. – Ryan Cogswell Feb 28 '22 at 13:00
  • @RyanCogswell I found an answer - thanks though. – Jay J Feb 28 '22 at 18:55
0

You can target the textfield label like this:

.MuiFormLabel-root {
  font-size: 20px !important;
}
Code ninja
  • 181
  • 1
  • 5