Centering the placeholder for a Textfield MUI

Question

I am trying to align a Placeholder to be centered within the Text-Field. Is there a way to do this? applying text-align: center to the input is not centering the placeholder.

Answer 1

You can use the &::placeholder pseudoselector on input classname like below

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

const useStyles = makeStyles(theme => ({
  input: {
    "&::placeholder": {
      color: "red",
      textAlign: "center"
    }
  }
}));

export default function Inputs() {
  const classes = useStyles();

  return (
    <TextField
      placeholder="Placeholder"
      InputProps={{ classes: { input: classes.input } }}
    />
  );
}

A working sandbox project link