gpt4 book ai didi

reactjs - 文本字段 : helperText spanning multiple lines

转载 作者:行者123 更新时间:2023-12-04 13:09:23 26 4
gpt4 key购买 nike

我有 TextFieldhelperText .我想做 helperText跨越多行。为此,我需要某种换行符。 Material-UI 渲染 <p>{ helperText }</p> .因为在 html 中,段落中的换行符由 <br/> 给出我试图将其添加到我的文本中。然而,这只是添加了 <br/>进入正文。我也尝试定义 helperText在组件外,一次用 <br/>和一次 \n .但这也不起作用。
如何在 helperText 中正确添加换行符?
我的代码示例:

<TextField
name={"help message"}
value={data_field.helper_text}
onChange={(event) => handleDataChange("helper_text", event.target.value)}
helperText={"The value will be shown be shown below the field, just like this text is.<br> This <br/> text should go in the second line."}
/>
结果示例:
enter image description here

最佳答案

helperText props 可以接受 ReactNode ,所以你可以添加一个 <br/> 元素来换行,如下所示:

<TextField
fullWidth
helperText={
<>
The value will be shown be shown below the field, just like this text
is.
<br />
This
<br /> text should go in the second line.
</>
}
{...props}
/>
Edit 67264236/textfield-helpertext-spanning-multiple-lines
@Vaibhav 建议的另一个解决方案是在包含 helperText 的元素上设置宽度:
import { styled } from '@mui/material/styles';
import MuiTextField from '@mui/material/TextField';

const TextField = styled(MuiTextField)({
'& .MuiFormHelperText-root': {
width: 250,
},
});
<TextField
fullWidth
helperText="The value will be shown be shown below the field, just like this text is. This text should go in the second line."
label="Outlined"
variant="outlined"
/>
Edit 67264236/textfield-helpertext-spanning-multiple-lines (forked)

关于reactjs - 文本字段 : helperText spanning multiple lines,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67264236/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com