下面是一个示例，展示了如何定位其中的每一个。

定位TextFieldroot 等同于定位FormControl，因为FormControl是由呈现TextField的“根”组件。

有一个在如何定位没有什么区别Input，FilledInput或者OutlinedInput-它们都通过达成InputProps。

作为旁注，className对给定组件使用prop 也等效于classes.root.

import React from "react";
import ReactDOM from "react-dom";

import TextField from "@material-ui/core/TextField";
import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles({
  formControlRoot: {
    border: "2px solid lightgreen",
    padding: 2,
    marginTop: 10
  },
  inputRoot: {
    border: "2px solid blue"
  },
  inputLabelRoot: {
    border: "2px solid pink"
  },
  formHelperTextRoot: {
    border: "2px solid red"
  }
});

function App() {
  const classes = useStyles();
  const [variant, setVariant] = React.useState("standard");
  return (
    <div>
      <TextField
        variant={variant}
        label={`My Label (${variant})`}
        helperText="My Helper Text"
        classes={{ root: classes.formControlRoot }}
        InputProps={{ classes: { root: classes.inputRoot } }}
        InputLabelProps={{ classes: { root: classes.inputLabelRoot } }}
        FormHelperTextProps={{ classes: { root: classes.formHelperTextRoot } }}
      />
      <br />
      <br />
      <button onClick={() => setVariant("standard")}>Standard</button>
      <button onClick={() => setVariant("outlined")}>Outlined</button>
      <button onClick={() => setVariant("filled")}>Filled</button>
    </div>
  );
}

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

相关文档：https : //material-ui.com/api/text-field/#props

回答这个问题将具体取决于您使用的材料 ui 版本，但我将假设您使用的是版本 > 3。

以下所有内容都应该在 3.9 版中工作，因为我自己使用过它们，但它们也应该在版本 > 4 下正常工作；

input props 用于将 props 直接传递给底层的常规 html 输入元素，您可以传递诸如 style、max、value、onchange 之类的东西。原生于 html 输入元素的东西。

如果要将类传递给底层材质 ui 输入，则需要将类对象传递给 InputProps。

这是如何

<TextField    
    variant="outlined"
    // this passes props to the html element, root for example here does not mean anything
    inputProps={{
      style: { textAlign: 'center' },
    }
    // this passes props to the wrapper material input, can be  one of the following: Input, FilledInput, OutlinedInput
    // You can pass here anything that the underlying material component uses but we are only interested in two things classes and className, because other props like value and onChange you can pass directly to TextField - thats why they said TextField is an Abstraction over theses Components
    InputProps={{
       className: styles.slider_filter_input, // usually you dont need className, classes will be sufficient, but wanted to show that you can also use it 
       classes: {
          focused: classes.focused
          // the list of keys you pass here depend on your variant, if for example you used variant="outlined" then you need to check the css api of the OutlinedInput
       }
    }}
/>

最后，这是一个工作代码和框，显示了上面的想法https://codesandbox.io/s/material-ui-drawer-8p6wv