Question

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

FormControl
输入
InputLabel
FilledInput
OutlinedInput
输入
FormHelperText

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

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

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

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

如果该子组件类仅对该组件唯一，则可以实现所有这些目的。

我的问题是，如何为更常见的命名类设置样式，比如说我想一次修改TextField内部的OutlinedInput，InputLabel，FormHelperText或更多子组件的根类？我认为这行不通吗？

<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，而是在其上使用这些子组件来构建textfield组件。

Answer 1

下面是一个示例，展示了如何定位这些目标。

定位TextField的根等同于定位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

Answer 2

回答这个问题将具体取决于您所使用的用户界面版本，但我将假设您正在使用版本> 3。

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

input props用于将props直接传递给底层的常规html input元素，您可以传递样式，最大值，值，onchange之类的东西。 html input元素本身的内容。

如果要将类传递给基础材料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

上的想法

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

2 个答案: