Reactjs 样式材质UI文本字段

我正在尝试设计材质ui文本字段的样式，但我无法让它按我想要的方式工作。我只想要一个简单的白色输入字段，带有标准的MUI动画。我希望文本字段始终具有白色背景，文本为黑色

您可以在代码沙盒中找到代码：

---

提前谢谢

我强烈建议您使用功能组件，因为它是React的未来

下面，您可以将示例视为具有常规材质UI样式的功能组件

import React from "react";
import Grid from "@material-ui/core/Grid";
import TextField from "@material-ui/core/TextField";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
  root: { backgroundColor: "white" },
  box: { backgroundColor: "white" },
  input: {
    root: { backgroundColor: "white", color: "black" }
  }
}));

export default function FunctionalDemo() {
  const classes = useStyles();
  return (
    <Grid
      container
      direction="row"
      justify="center"
      alignItems="center"
      className={classes.root}
    >
      <Grid item xs={12} md={6} className={classes.box}>
        <form noValidate>
          <TextField
            id="email"
            label="Type here"
            variant="filled"
            color="secondary"
            className={classes.input.root}
          />
        </form>
      </Grid>
    </Grid>
  );
}

从“React”导入React；
从“@material ui/core/Grid”导入网格；
从“@material ui/core/TextField”导入TextField；
从“@material ui/core/styles”导入{makeStyles}”；
const useStyles=makeStyles（主题=>({
根：{backgroundColor:“白色”}，
方框：{backgroundColor:“白色”}，
输入：{
根：{背景颜色：“白色”，颜色：“黑色”}
}
}));
导出默认函数FunctionalDemo（）{
const classes=useStyles（）；
返回(
);
}

---

代码沙盒：

您可以使用以下代码自定义文本字段字体和背景色的样式：

const useStyles = makeStyles((theme) => ({
  root: {
    "& .MuiInputBase-root": {
      color: 'black' //or try theme.palette.primary.main
      backgroundColor: 'white' //It should be white by default
    }
  }
}));

然后简单地将“root”类添加到文本字段中。作为信息，上述语法称为JSS。MuiInputBase根是应用于输入组件的类，输入组件是TextField的子组件。在开发工具打开的情况下，您可以了解子组件是如何工作的，并通过MUI进行样式设置

---

关于JSS语法的更多信息。注意“&”和“.”之间的“空格”。此空格很重要，并充当选择器的一部分，告知.MuiInputBase根类位于父类的子组件上，该子组件接收“根”类样式。

您需要将代码放在此处，放在问题正文中。仅链接的答案在这一点上没有价值。请在您的答案中提供相关代码的示例。