reactjs - 将文本字段 MUI 的占位符居中

Question

我正在尝试将占位符对齐在文本字段中居中。有没有办法做到这一点？应用于text-align: centre输入不会使占位符居中。

标签： reactjsmaterial-ui

Answer 1

您可以在类名上使用&::placeholder伪选择器，如下所示input

 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 } }}
    />
  );
}

一个工作沙箱项目链接