如何在 React Material UI TextField 中居中占位符和文本答案

【问题标题】：How to center placeholder and text in React Material UI TextField如何在 React Material UI TextField 中居中占位符和文本
【发布时间】：2020-01-11 03:00:12
【问题描述】：

当前设计：

预期设计：

TextField 标签如下所示：

<TextField
        multiline={false}
        autoFocus
        placeholder={props.defaultAmt}
        helperText="Enter amount to pay"
        margin="normal"
        InputProps={{
            startAdornment: <InputAdornment position="start">₹</InputAdornment>
        }}
        />

我想将所有内容都集中在 TextField 中。我尝试过使用textAlign: 'center'，但它不起作用。

【问题讨论】：

标签： javascript css reactjs material-ui jsx

【解决方案1】：

您可以覆盖InputAdornment 组件中的positionStart 规则，其边距百分比取决于您的大小和其他影响文本字段样式的参数。我会建议这样的事情（我假设您正在使用makeStyles 生成您的样式，但要通过您自己的方式进行调整）。

要使 helperText 居中，只需将 Typography 组件添加到 prop 中，因为它是节点类型。向 Typography 组件添加样式以使文本居中，它应该可以工作：

const useStyles = makeStyles(() => ({
  centerAdornment: {
    marginLeft: "50%" // or your relevant measure
  },
  centerText: {
    textAlign: "center"            
  }
}));

还有最重要的：

<TextField
    multiline={false}
    autoFocus
    placeholder={props.defaultAmt}
    helperText={
                  <Typography 
                    variant="caption" 
                    className={classes.centerText}
                    display="block"
                  >
                      Enter amount to pay
                  </Typography>
               }
    margin="normal"
    InputProps={{
        startAdornment: (
            <InputAdornment 
                 position="start"
                 classes={{ positionStart: classes.centerAdornment}}
            >
                ₹
            </InputAdornment>
    }}
/>

【讨论】：

这非常适合文本和占位符。任何使底部文本居中的解决方案？
@user3787635 我也更新了底部文本的答案。
完美！谢谢。据我所知，这不在文档中。你是怎么知道这一切的？抱歉，我是反应和材料 UI 的新手。
@user3787635 欢迎。覆盖规则和类位于 API 部分 here for the textfield 和 here for the InputAdornment 中每个组件的文档中。希望对未来有所帮助。

【解决方案2】：

您可以设置子 div 对齐并减小 TextBox 宽度来实现此目的。创造这样的风格，

const styles = {
   textBox: {
   "& $div": {
        justifyContent: "center",
       "& $input": {
          width: "30%"
        }
     },
   "& $p": {
      alignSelf: "center"
   }
}
};

然后给TextField设置样式

<TextField
   className={props.classes.textBox}
   multiline={false}
   autoFocus
   placeholder={"5000"}
   helperText="Enter amount to pay"
   margin="normal"
   InputProps={{
       startAdornment: <InputAdornment position="start">₹</InputAdornment>
      }}
  />

Here 是工作中的 CodeSandbox 示例。

【讨论】：

【解决方案3】：

对于帮手，简单做：

<TextField
...
error={isError}
helperText={errorMessage}
FormHelperTextProps={{
  style: {
    textAlign: 'center'
  }
}}
/>

【讨论】：

【解决方案4】：

hintStyle={{ width: '600px', textAlign: 'center' }}

添加此道具并尝试

【讨论】：

不起作用。它只是将 TextField 的宽度增加到 600px。