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

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

您可以覆盖 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>
    }}
/>