html - ฉันจะใช้ prop error และ css สำหรับ Input API ของ Material UI กับ context อย่างไร

ฉันจำเป็นต้องใช้ props และ CSS ของ MUI Input API สำหรับ {error} และการใช้งานของมัน

โค้ดของฉันมีลักษณะดังนี้:

const [value, setValue] = useState<string>(cell.value);
const [startAdornment, setStartAdornment] = useState<adornmentTypes>("");
const [endAdornment, setEndAdornment] = useState<adornmentTypes>("");
const [error, seterror] = useState<error>(false);

<Input
  id={id}
  value={value}
  onChange={_onChange} //have a method
  onBlur={_onBlur} //have a method
  onFocus={_handleFocus} //have a method
  startAdornment={startAdornment} //have switch cases on special character $,% etc
  endAdornment={endAdornment}
  error={error} />

ตอนนี้ตามเอกสารของ Material error - bool - ถ้าเป็นจริง อินพุตจะแสดงข้อผิดพลาด โดยปกติจะได้รับค่าผ่าน context จาก FormControl

และสำหรับ pseudo class error - .Mui-error - pseudo-class ใช้กับองค์ประกอบ root หาก error={true}

ตอนนี้ฉันไม่สามารถใช้สถานะข้อผิดพลาดเป็นจริงได้เพราะประเภทค่าถูกกำหนดเป็นสตริง!

ฉันกำลังพลาดอะไรอยู่หรือเปล่า? ช่วยด้วย!

คำตอบ #1

เราสามารถดูได้จากเอกสาร Material-UI ของ Input API

สำหรับพร็อพ: ข้อผิดพลาด

ประเภท: bool
คำอธิบาย: หากเป็นจริง ข้อมูลอินพุตจะระบุว่ามีข้อผิดพลาด

สำหรับ css: ข้อผิดพลาด

คลาสระดับโลก: .Mui-error
คำอธิบาย: พรีโซคลาสที่ใช้กับองค์ประกอบหลักหาก error={true}.

พวกเขาเป็นสองสิ่งที่แตกต่างกัน เราสามารถใช้พวกเขาได้ดังนี้:

<Input
  ...
  error={errorFlag}
  classes={{error: classes.errorStyleClass}}
/>

ถ้าค่าของ props error เป็นจริง สไตล์ของ CSS error จะถูกนำไปใช้

นั่นคือแนวคิดของสิ่งประเภทนั้น เนื่องจากเราไม่มีข้อมูลเพิ่มเติมจากโพสต์ หากมีปัญหาเพิ่มเติม โปรดอัปเดตให้ทราบ