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

Question

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

Answer 1

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

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

工作sandbox project链接