Как правильно создать пользовательский компонент 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;