将自定义主题选项传递给不同的组件文本区域

Question

我正在尝试为所有文本字段设置自定义高度，并且效果很好。但是，高度也适用于textarea字段，我不希望我的textarea字段的高度为50，而我的输入的高度为35，但是35适用于所有字段，但我不希望确定如何仅将textareas的自定义主题传递给我的textarea多行？

此外，我不确定如何使文本框宽度为100％？我尝试将其设置为自定义样式，但无法正常工作，我不确定为什么。

这是我的代码：

Theme.js（文件）

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

export default createMuiTheme({
  typography: {
    fontFamily: 'Noto Serif SC", serif',
    useNextVariants: true
  },
  menu: {
    width: 200
  },
  overrides: {
    MuiFormControl: {
      root: {
        margin: 10
      }
    },
    textArea: {
      margin: 10,
      borderColor: "#000",
      width: "100%",
      height: "50px"
    },
    MuiInputBase: {
      root: {
        borderColor: "#000",
        width: "250px",
        height: 35
      }
    },
    MuiButtonBase: {
      root: {
        background: "#06a7d3 !important",
        color: "#fff !important",
        borderRadius: "30px !important",
        border: "0px !important",
        height: "35px !important",
        margin: "10px !important",
        outline: "none !important",
        marginLeft: "10px !important",
        fontSize: "16px !important",
        "&:hover": {
          backgroundColor: "#06a7d3 !important",
          borderColor: "#06a7d3 !important"
        }
      }
    }
  }
});

Contact.js（文件）

import React from "react";

import Header from "../common/Header";
import Footer from "../common/Footer";
import MyTheme from "../common/Theme";

import { Link } from "react-router-dom";

import {
  MuiThemeProvider,
  createMuiTheme,
  withStyles
} from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
import Grid from "@material-ui/core/Grid";
import Button from "@material-ui/core/Button";

class Contact extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      fullName: "",
      fullNameError: "",
      email: "",
      emailError: "",
      message: ""
    };
  }


  render() {
    return (
      <div className="contactContainer">
        <Header />
        <div className="fluid-container">
          <div className="container">
            <div className="formHeader">
            <div className="row">
              <div className="col-md-8">
                <div className="formContainer">
                  <MuiThemeProvider theme={MyTheme}>
                    <form
                      method="POST"
                      noValidate
                      autoComplete="off"
                      onSubmit={e => this.onSubmit(e)}
                    >
                      <div className="formContainer">
                        <Grid container>
                          <Grid item xs={12}>
                            <TextField
                              InputLabelProps={{ shrink: true }}
                              name="fullName"
                              value={this.state.fullName}
                              type="text"
                              label="Full Name"
                              error={this.state.fullNameError ? true : false}
                              helperText={this.state.fullNameError}
                              variant="outlined"
                              onChange={e => this.onChange(e)}
                            />
                          </Grid>

                          <Grid item xs={12}>
                            <TextField
                              InputLabelProps={{ shrink: true }}
                              name="email"
                              type="email"
                              value={this.state.email}
                              label="Email Address"
                              error={this.state.emailError ? true : false}
                              helperText={this.state.emailError}
                              variant="outlined"
                              onChange={e => this.onChange(e)}
                            />
                          </Grid>

                          <Grid item xs={12}>
                            <TextField
                              style={{ height: props.MyTheme.textArea }}
                              InputLabelProps={{ shrink: true }}
                              multiline
                              rows="4"
                              name="message"
                              value={this.state.message}
                              label="Message"
                              variant="outlined"
                              onChange={e => this.onChange(e)}
                            />
                          </Grid>

                          <Grid item xs={12}>
                            <Button variant="outlined" type="submit">
                              SUBMIT
                            </Button>
                          </Grid>
                        </Grid>
                      </div>
                    </form>
                  </MuiThemeProvider>
                </div>
              </div>
            </div>
          </div>
        </div>
        <Footer />
      </div>
    );
  }
}

export default Contact;