如何在 <input /> 元素中使用 TextField 的 InputProps

Question

是否有办法在<input />元素中使用InputProps而不是材料UI的<TextField />?

我使用InputProps的Input.js组件:

const Input = ({name, handleChange, type, handleShowPassword}) => {
return(

<input 
name={name}
onChange={handleChange}
require
type={type}
InputProps={name === 'password' && {
endAdornment: (
<InputAdornment position="end">
<IconButton onClick={handleShowPassword}>
{type === 'password' ? <Visibility /> : <VisibilityOff />}
</IconButton>
</InputAdornment>
),
}}
/>
)
}
export default Input

SignUp.js:

const SignUp = () => {
return (
<div>
<Input name="firstName" handleChange={handleChange} />
<Input name="password" type={showPassword ? 'text' : 'password'} handleShowPassword={handleShowPassword} />                              
</div>
)
}
export default SignUp

请任何帮助将不胜感激，如果有任何其他方法实现的结果，请随时分享。

Answer 1

我的建议是你需要使用Tailwindcss，并安装Tailwindcss/forms包。

我刚发现一个顺风组件正在使用

<input/> 

链接:https://www.hyperui.dev/components/marketing/forms