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

Posted 2023-02-22

【中文标题】如何在 React Material UI TextField 中居中占位符和文本

【英文标题】：How to center placeholder and text in 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'，但它不起作用。

【参考方案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。