将文本字段 MUI 的占位符居中答案

【问题标题】：Centering the placeholder for a Textfield MUI将文本字段 MUI 的占位符居中
【发布时间】：2020-06-24 01:44:01
【问题描述】：

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

【问题讨论】：

如果您展示您正在做的事情的示例代码将会很有帮助。您真的是指“占位符”还是指的是标签（当 TextField 为空且没有焦点时，它的显示与占位符非常相似）？

【解决方案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 链接

【讨论】：

我没有意识到您要的是 TextField 组件，而不是 Input 组件仅供参考，TextField 正在使用输入字段底层，它正在将 InputProps' through we can pass classes 的道具暴露给底层 Input元素。您可以从上一个答案中推断出这一点，我建议您更多地了解 Material-UI 库以及我们如何覆盖样式和其他内容In-Short：新解决方案在 TextField 上也能正常工作
您是否有机会获得有关材料 ui @core 的覆盖样式文档的链接。将不胜感激！