how to change the height of Material-UI textfield without using react hooks

Question

I need to change the height of a multi-line material-UI TextField in a class components to be longer, but the previous examples I found on SO seem to use functional component and hooks.

My code can be found below or in this sandbox

import React, { Component } from "react";
import ReactDOM from "react-dom";
import TextField from "@material-ui/core/TextField";


class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      year: "2010",
      otherAttributes: ""
    };
  }

  handleChangefor = (propertyName) => (event) => {
    this.setState({
      ...this.state,
      [propertyName]: event.target.value
    })
  }

  render() {
    return (
      <div>
        <p>text field below </p>

        <TextField
          id="outlined-multiline-flexible"
          label="year"
          multiline
          rowsMax="10"
          value={this.state.year}
          onChange={this.handleChangefor("year")}
          margin="normal"
          helperText=""
          variant="filled"
        />
      </div>
    );
  }
}


const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Documentations point to 'makeStyle' and 'useStyle' hoc but I couldn't find examples where they are used on class components.

Matt Oestreich · Accepted Answer · 2019-07-08T00:19:16.153

You should be able to use withStyles - I had to use minHeight ... using just height would not work for me..

Edit: since you were asking about multiple TextFields in a single class, I have updated my answer.

Single Class with Single TextField:

import React, { Component } from "react";
import ReactDOM from "react-dom";
import TextField from "@material-ui/core/TextField";
import { withStyles } from "@material-ui/core/styles";

const styles = {
  someTextField: {
    minHeight: 420
  }
};


class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      year: "2010",
      otherAttributes: "",
    };
  }

  handleChangefor = (propertyName) => (event) => {
    this.setState({
      ...this.state,
      [propertyName]: event.target.value
    })
  }

  render() {
    return (
      <div>
        <p>text field below </p>

        <TextField
          id="outlined-multiline-flexible"
          label="year"
          multiline
          rowsMax="10"
          value={this.state.year}
          onChange={this.handleChangefor("year")}
          margin="normal"
          helperText=""
          variant="filled"
          InputProps={{ classes: { input: this.props.classes.someTextField } }}
        />
      </div>
    );
  }
}

const StyledTextFieldApp = withStyles(styles)(App)

const rootElement = document.getElementById("root");
ReactDOM.render(<StyledTextFieldApp />, rootElement);

Single Class with Multiple TextField:

import React, { Component } from "react";
import ReactDOM from "react-dom";
import TextField from "@material-ui/core/TextField";
import { withStyles } from "@material-ui/core/styles";

const styles = {
  someTextField: {
    minHeight: 420
  },
  someOtherTextField: {
    minHeight: 120,
  }
};


class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      year: "2010",
      otherAttributes: "",
    };
  }

  handleChangefor = (propertyName) => (event) => {
    this.setState({
      ...this.state,
      [propertyName]: event.target.value
    })
  }

  render() {
    return (
      <div>
        <p>text field below </p>

        <TextField
          id="outlined-multiline-flexible"
          label="year"
          multiline
          rowsMax="10"
          value={this.state.year}
          onChange={this.handleChangefor("year")}
          margin="normal"
          helperText=""
          variant="filled"
          InputProps={{ classes: { input: this.props.classes.someTextField } }}
        />
        <TextField
          id="outlined-multiline-flexible"
          label="year"
          multiline
          rowsMax="10"
          value={this.state.year}
          onChange={this.handleChangefor("year")}
          margin="normal"
          helperText=""
          variant="filled"
          InputProps={{ classes: { input: this.props.classes.someOtherTextField } }}
        />
      </div>
    );
  }
}

const StyledTextFieldApp = withStyles(styles)(App)

const rootElement = document.getElementById("root");
ReactDOM.render(<StyledTextFieldApp />, rootElement);

Thanks! Does it mean TextField must be a component of its own so it can be wrapped in withStyles(styles)(App) if I intend to put multiple such components in a class? — santoku, Jul 07 '19 at 23:46
If you have a class with multiple `TextFields` in it, and you want each of those `TextFields` to have their own style - you would just need to target each one with a specific style (aka `CSS` class) name. Just look at the `const styles = { someTextField: {...} }` as an object that holds `CSS` classes.. [This example shows how you could accomplish that](https://stackblitz.com/edit/react-4bf4nz) — Matt Oestreich, Jul 08 '19 at 00:12
@santoku no problem! Happy to help. I have also updated my answer reflecting how to handle this using a single class and multiple `TextField` components. Cheers! — Matt Oestreich, Jul 08 '19 at 00:20

how to change the height of Material-UI textfield without using react hooks

1 Answers1