Question

当前设计：

预期设计：

TextField标记如下：

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

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

Answer 1

您可以覆盖positionStart组件中的InputAdornment规则，并根据大小和影响文本字段样式的其他参数用边距百分比覆盖。我会建议这样的事情（我想您是用makeStyles生成样式，但是要用自己的方式适应）。

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

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

Answer 2

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

添加此道具并尝试

Answer 3

您可以设置Child 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示例。

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

3 个答案: