更改MUI文本字段的多个组件根 [英] Altering multiple component roots for MUI Textfield

问题描述

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

According to the MUI Texfield API here, Textfield is a simple abstraction on top of the following components

1. FormControl
2. 输入
3. InputLabel
4. FilledInput
5. OutlinedInput
6. 输入
7. FormHelperText

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

And therefore, to change the styling of the Textfield for any of the components above, like for example notchedOutline class, which is a class for OutlinedInput, i can just do the following

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

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

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

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

All of this can be achieved if that subcomponent classes are unique for that component only.

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

My question is, how can i style for the more common naming class, like if say i wanna modify the root classes of OutlinedInput, InputLabel, FormHelperText or more subcomponents inside the TextField all at once? I dont think this will work right?

<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组件.

Need help on how to aim the specific root of a subcomponent of a TextField, without needing to touch on the global MUI theming, or not using the provided TextField at all, instead building the textfield component using those subcomponents on it.

推荐答案

下面是显示如何定位每个目标的示例.

Below is an example showing how to target each of these.

定位TextField根等同于定位FormControl，因为FormControl是根"组件

Targeting TextField root is equivalent to targeting FormControl, since FormControl is the "root" component rendered by TextField.

Input，FilledInput或OutlinedInput的定位方式没有区别-它们都是通过InputProps到达的.

There is no difference in how to target Input, FilledInput, or OutlinedInput -- they are all reached via InputProps.

请注意，对于给定的组件使用className道具也等同于classes.root.

As a side note, using the className prop for a given component is also equivalent to 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

这篇关于更改MUI文本字段的多个组件根的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！