如何在不使用反应钩子的情况下更改 Material-UI 文本字段的高度

Question

我需要将一个类组件中的多行material-UI TextField的高度改长一些，但是我在SO上找到的之前的examples似乎使用了功能组件和钩子。

我的代码可以在下面或这个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);

文档指向 'makeStyle' 和 'useStyle' hoc，但我找不到它们用于类组件的示例。

Answer 1

您应该可以使用withStyles - 我必须使用minHeight ...仅使用height 对我不起作用..

编辑：因为您在一个班级中询问多个TextFields，所以我更新了我的答案。

• Stackblitz - single class with a single TextField

• Stackblitz - 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
  }
};


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);

具有多个文本字段的单个类：

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);