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

高拉夫·辛格（Gaurav Singh）

当前设计：

预期设计：

TextField标记如下所示：

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

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

负273

您可以根据大小和其他影响Textfield样式的参数，以边距百分比替代组件中的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>
    }}
/>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。