我正在使用React Material UI的TextField元素。我想要的東西是，當我按下提交按鈕時，我得到的幫助文本是 "請輸入密碼"。
像這樣：
但是當helpertext出現時，我需要將TextField的邊框顏色改為我想從SCSS檔案中應用的顏色。因為我想通過SCSS檔案來改變邊框的顏色。
我想要的東西是在焦點上是這樣的。
到目前為止我所做的代碼：
<TextField。
id="form-el-2 outlined-basic"。
name="userName"
variant=" outlined"/span>
placeholder={"Please enter valid password"}。
helperText={
errorMsgs.userNameErr && errorMsgs.userNameErr.length?
? errorMsgs.userNameErr ?
: null ?
}
onChange={handleChange}
value={cabinetInfo.userName}>
/>。
還有SCSS：
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline{
border: 1px solid;
border-color: #c4c4c4;
outline: 1px solid $primary-color ! important;
outline-offset: 1px;
}
如何做到這一點？這可能嗎？謝謝你的提議。
uj5u.com熱心網友回復：
你可以將error道具傳遞給<TextField />
<TextField
error
id=" outlined-error-helper-text"。
label="Error"/span>
defaultValue="Hello World"。
helperText="不正確的條目"。
/>uj5u.com熱心網友回復：
你可以創建一個自定義類，然后將其有條件地應用于你的組件
// Whatever classname or styles you want。
.text-field-with-error {
border: 1px solid;
border-color: #c4c4c4;
outline: 1px solid $primary-color ;
outline-offset: 1px;
}
而Jsx部分則是：
<TextField className={hasError ? "text-field-with-error" : " "}。/>
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/333728.html
標籤：