如何正确制作自定义Material UI TextField组件？

Question

在某些情况下，我需要创建一个TextField组件，该组件将使用浅色功能进行渲染，以覆盖深色背景。

我宁愿不必这样做，但它现在正在工作。有更好的方法吗？

import { TextField } from "@material-ui/core";
import { withStyles } from "@material-ui/core/styles";
import Colors, { rgba } from "theme/colors";

const TextFieldLight = withStyles({
  root: {
    "& label": {
      color: Colors.white
    },
    ".MuiFormLabel-root": {
      fontSize: "1rem"
    },
    "& label.MuiInputLabel-focused": {
      color: Colors.white,
      transform: "translate(0, 0) scale(0.8)"
    },
    "& label.MuiInputLabel-shrink": {
      color: Colors.white,
      transform: "translate(0, 0) scale(0.8)"
    },
    "& .MuiInput-underline:before": {
      borderBottomColor: rgba(Colors.white, 0.2)
    },
    "& .MuiInput-underline:hover:before": {
      borderBottomColor: rgba(Colors.white, 0.5)
    },
    "& .MuiInput-underline:after": {
      borderBottomColor: Colors.white
    },
    "& .MuiInput-root": {
      color: Colors.white
    },
    "& + p[class*='fieldError']": {
      color: Colors.red200,
      marginTop: 0
    }
  }
})(TextField);

export default TextFieldLight;