您可以尝试添加 Textfield API 中提到的 size="small"

<TextField variant="outlined" size="small" / >

另一个答案很有用，但对我没有label用，因为如果在outlined组件中使用了 a （就像在问题中一样），它会离开未label居中的位置。如果这是您的用例，请继续阅读。

的方式<label>组件的样式有些特质，使用position: absolute和transform。我相信这样做是为了在您专注于该领域时使动画工作。

以下对我有用，使用最新的 material-ui v4（它也适用于v3）。

// height of the TextField
const height = 44

// magic number which must be set appropriately for height
const labelOffset = -6

// get this from your form library, for instance in
// react-final-form it's fieldProps.meta.active
// or provide it yourself - see notes below
const focused = ???

---

<TextField
  label="Example"
  variant="outlined"

  /* styles the wrapper */
  style={{ height }}

  /* styles the label component */
  InputLabelProps={{
    style: {
      height,
      ...(!focused && { top: `${labelOffset}px` }),
    },
  }}

  /* styles the input component */
  inputProps={{
      style: {
        height,
        padding: '0 14px',
      },
  }}
/>

笔记

• 我只是使用内联样式而不是withStylesHOC，因为这种方法对我来说似乎更简单
• focused此解决方案需要该变量 - 您可以使用final-form，formik可能还有其他表单库来获得它。如果您只是使用 rawTextField或其他不支持此功能的表单库，则必须自己进行连接。
• 该解决方案依赖于一个幻数labelOffset来居中，label它与height您选择的静态耦合。如果您想编辑height，您还必须进行labelOffset适当的编辑。
• 此解决方案不支持更改标签字体大小。您可以更改输入字体大小，前提是您认为输入字体大小与标签不匹配。问题在于，在 javascript 中根据一个幻数比率计算在轮廓边框中放置标签的“缺口”的大小，该比率仅在标签字体大小为默认值时才有效。如果您将标签字体设置得较小，则标签显示在边框中时，凹口也会太小。没有简单的方法可以覆盖它，除了自己重复整个计算并通过 CSS自己设置槽口的宽度（组件是fieldset> legend）。对我来说这不值得，因为我可以使用高度为 44 像素的默认字体大小。

该组件采用multiline一个布尔值 prop。将此设置为 true，然后将组件的rowsprop设置为一个数字。

   <TextField
      multiline={true}
      rows={3}
      name="Description"
      label="Description"
      placeholder="Description"
      autoComplete="off"
      variant="outlined"
      value={description}
      onChange={e => setDescription(e.target.value)}
    />

您没有展示如何尝试指定高度，但是您用于 font-size 的方法是正确的方法。这是一个示例，显示了具有不同高度的两个文本字段：

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 = {
  input1: {
    height: 50
  },
  input2: {
    height: 200,
    fontSize: "3em"
  }
};
function App(props) {
  return (
    <div className="App">
      <TextField
        variant="outlined"
        InputProps={{ classes: { input: props.classes.input1 } }}
      />
      <TextField
        variant="outlined"
        InputProps={{ classes: { input: props.classes.input2 } }}
      />
    </div>
  );
}
const StyledApp = withStyles(styles)(App);
const rootElement = document.getElementById("root");
ReactDOM.render(<StyledApp />, rootElement);

而这里是一个代码，沙箱与相同的代码，所以你可以看到它运行。

首先，我的心与这个线程中的任何可怜的灵魂同在，他们发现自己与 MUI 组件的笨拙设计作斗争。其次，如果您使用主题和 TextField 的“填充”变体，则此解决方案可能适合您。使用 Chrome 开发工具，我发现使用“MuiFormControl-root”和“MuiInputBase-root”类调整 div 的高度是成功的。这是我的代码的样子（结果可能会有所不同）：

const theme = createMuiTheme({
  overrides: {
    MuiFormControl: {
      root: {
        height: '56px',
      },
    },
    MuiInputBase: {
      root: {
        height: '56px',
      },
    },
  },
})