更改 MUI 文本字段的多个组件根

Question

根据此处的 MUI Texfield API，Textfield 是在以下组件之上的一个简单抽象

1. 表单控件
2. 输入
3. 输入标签
4. 填充输入
5. 大纲输入
6. 输入
7. FormHelperText

因此，要更改上述任何组件的 Textfield 的样式，例如 notchedOutline 类，它是 OutlinedInput 的一个类，我可以执行以下操作

import { TextField } from '@material-ui/core';

const style = theme => ({
  notchOutline: { /*style in here*/ }
});

<TextField
    inputProps={{ notchedOutline : classes.notchedOutline }}
>
</TextField>

如果该子组件类仅对该组件是唯一的，那么所有这些都可以实现。

我的问题是，我如何为更常见的命名类设置样式，例如，如果我想同时修改 OutlinedInput、InputLabel、FormHelperText 的根类或 TextField 内的更多子组件？我认为这行不通？

<TextField
    FormControlProps={{ root: classes.root }}
    OutlinedInputProps={{ root: classes.root, notchedOutline : classes.notchedOutline }}
>
</TextField>

或

<TextField
    inputProps={{ 
        root: classes.OutlinedInputRoot, 
        root : classes.FormHelperTextRoot 
    }}
>
</TextField>

需要有关如何定位 TextField 子组件的特定根的帮助，而无需涉及全局 MUI 主题，或者根本不使用提供的 TextField，而是使用其上的那些子组件构建文本字段组件。

Answer 1

回答这个问题将具体取决于您使用的材料 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

Answer 2

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

定位TextField root 等同于定位FormControl，因为FormControl 是“根”组件rendered by TextField。

在如何定位Input、FilledInput 或OutlinedInput 方面没有区别——它们都是通过InputProps 到达的。

附带说明，对给定组件使用 className 属性也等效于 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