我可以在reactjs中为从MUI导入的两个文本字段添加一个通用的辅助文本吗?

Question

这是我的密码容器代码

.password-form-container {
width: 85%;
height: 7%;
position: relative;
top: 230px;
left: 40px;
display: flex;
justify-content: space-between;
border: 1px solid red;
}

<div className="password-form-container">
<TextField id="outlined-basic" label="Password" variant="outlined" size="small" className="name-container" helperText='Use 8 or more characters with a mix of letters, numbers & symbols' />
<TextField id="outlined-basic" label="Confirm" variant="outlined" size="small" className="name-container" />
</div>

[这一页是我的目标，但我没有得到][1]请查看这张图片这是我正在处理的页面但是由于辅助文本属于第一个文本字段所以它是受限制的但是我希望第一张图片中的辅助文本也像这样请查看这张图片

Answer 1

如果我理解正确的话，您可以添加像该图像这样的CSS。HelperText的类为.MuiFormHelperText-root

.MuiFormHelperText-root {
width: 50%; //or what you want
}

第二个Textfield可以为空