我正在使用React Material UITextField元素。我想要的是当我按下提交按钮时，我得到的帮助文本是"；请输入密码"；。

像这样：

但是当HelperText出现时，我需要将TextField边框颜色更改为我想从SCSS文件中应用的颜色。因为我想通过SCSS文件更改边框颜色。

的焦点是像这样的东西。TextField边框应为红色，其轮廓应为蓝色：

的代码：

<代码><；文本字段ID="；表格EL-2大纲-基本"；名称="；用户名"；变量="；概述"；占位符={"；请输入有效密码"；}帮助文本={ErrorMsgs.UsernameErr&；&；ErrorMsgs.UsernameErr.Length?ErrorMsgs.UsernameErr：空}onChange={handlechange}value={cabinetinfo.username}/>；

还有SCSS：

<TextField
  id="form-el-2 outlined-basic"
  name="userName"
  variant="outlined"
  placeholder={"Please enter valid password"}
  helperText={
    errorMsgs.userNameErr && errorMsgs.userNameErr.length
      ? errorMsgs.userNameErr
      : null
  }
  onChange={handleChange}
  value={cabinetInfo.userName}
/>;

该怎么做？这可能吗？谢谢你的预付款。

顺晟科技：

您可以创建一个自定义类，然后有条件地

.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
    border: 1px solid;
    border-color: #c4c4c4;
    outline: 1px solid $primary-color !important;
    outline-offset: 1px;
  }

而JSX部分将是：

<代码><；TextField类名={HasError？"；带错误的文本域"；："；"；}/>；

您可以将// Whatever classname or styles you want .text-field-with-error { border: 1px solid; border-color: #c4c4c4; outline: 1px solid $primary-color !important; outline-offset: 1px; } prop传递给<TextField className={hasError ? "text-field-with-error" : " "} />

此示例或Material-UI文档。

<代码><；文本字段错误ID=“ outline-error-helper-text ”标签=“错误”DefaultValue=“世界你好”HelperText=“输入不正确。”/>；