Source:  Twitter logo

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.

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);
1 users liked answer #0dislike answer #01
Matt Oestreich profile pic
Matt Oestreich

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).