reactjs - 无法将文本对齐应用于 Material UI 输入组件，但其他一切正常

Question

当我检查时，似乎我创建的所有输入样式实际上都转到了 Material UI 创建的包装输入的外部 div。但其他样式也有效，所以我不确定发生了什么？

const useStyles = makeStyles(theme => ({
  formControl: {
    ...
  },
  label: {
    ...
  },
  input: {
    color: "black",
    '&:after': {
      borderColor: 'black',
      textAlign: 'center'
    },
    fontSize: getFontSize(),
    display: 'flex',
    alignItems: 'center'  // this is the only thing that does NOT work
  },
  inputElement: {
    textAlign : 'center'
  }
}));

const classes = useStyles();

<FormControl className={classes.formControl}>
  {
    labelText &&
    <InputLabel
      className={classes.label}
      htmlFor="component-helper"
    >
      {labelText}
    </InputLabel>
  }
  <Input
    className={classes.input}
    classes={classes.inputElement}  // this does NOT work either
    id={"component-helper"}
    value={text}
    onBlur={handleBlur}
    onChange={handleChange}
    aria-describedby="component-helper-text"
  />
</FormControl>

Answer 1

您的问题中以下代码的主要问题:

  <Input
    className={classes.input}
    classes={classes.inputElement}  // this does NOT work either
    id={"component-helper"}
    value={text}
    onBlur={handleBlur}
    onChange={handleChange}
    aria-describedby="component-helper-text"
  />

classes 属性应如下所示:

  <Input
    className={classes.input}
    classes={{input: classes.inputElement}}
    id={"component-helper"}
    value={text}
    onBlur={handleBlur}
    onChange={handleChange}
    aria-describedby="component-helper-text"
  />

下面是一个工作示例。我用过

classes={inputClasses}

在我的示例中，但这相当于

classes={{root: inputClasses.root, input: inputClasses.input}}

import React from "react";
import ReactDOM from "react-dom";
import { makeStyles, FormControl, InputLabel, Input } from "@material-ui/core";

const useInputStyles = makeStyles(theme => ({
  root: {
    color: "black",
    "&:after": {
      borderColor: "black"
    },
    fontSize: 12
  },
  input: {
    textAlign: "center"
  }
}));

function App() {
  const inputClasses = useInputStyles();
  const labelText = "Test Label";
  return (
    <FormControl>
      <InputLabel htmlFor="component-helper">{labelText}</InputLabel>
      <Input
        classes={inputClasses}
        id="component-helper"
        aria-describedby="component-helper-text"
      />
    </FormControl>
  );
}

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