如何在React Material UI TextField中将占位符和文本居中
如何在React Material UI TextField中将占位符和文本居中
提问于 2019-09-09 18:42:07
当前设计：
预期设计：
TextField标记如下所示：
<TextField
multiline={false}
autoFocus
placeholder={props.defaultAmt}
helperText="Enter amount to pay"
margin="normal"
InputProps={{
startAdornment: <InputAdornment position="start">₹</InputAdornment>
}}
/>我想要将TextField中的所有内容居中。我试过使用textAlign: 'center'，但它不起作用。
回答 4
Stack Overflow用户
回答已采纳
发布于 2019-09-09 19:33:30
您可以覆盖InputAdornment组件中的positionStart规则，边距百分比取决于您的大小和其他影响Textfield样式的参数。我建议这样做(我假设你是用makeStyles生成你的风格，但用你自己的方式去适应)。
要使helperText居中，只需在属性中添加一个排版组件，因为它属于节点类型。将样式添加到排版组件以使文本居中，它应该可以工作：
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>
}}
/>Stack Overflow用户
发布于 2019-09-09 19:55:57
您可以设置子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示例。
Stack Overflow用户
发布于 2021-10-02 06:29:44
对于helper，只需执行以下操作：
<TextField
...
error={isError}
helperText={errorMessage}
FormHelperTextProps={{
style: {
textAlign: 'center'
}
}}
/>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57852393
复制相关文章
相似问题
腾讯云开发者
