Customize TextField text color, alignment, and size

TextField Customization

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

const StyledTextField = withStyles((theme) => ({
  root: {
    margin: theme.spacing(2),
    width: 300,
    "& .MuiInput-underline": {
      color: theme.palette.primary.main,
      height: 60,
      "& input": {
        textAlign: "right"
      }
    },
    "& .MuiFormLabel-root": {
      color: theme.palette.secondary.main
    }
  }
}))(TextField);

export default function CustomTextFields() {
  return (
    <>
      <Paper>
        <StyledTextField label="Custom" defaultValue="Custom TextField" />
      </Paper>
      <br />
      <a href="https://medium.com/the-clever-dev/customizing-material-ui-textfield-text-color-alignment-width-and-height-2161daded871">
        Click here for more Material UI TextField customization!
      </a>
    </>
  );
}