Estoy usando Material UI para crear un campo de contraseña y un campo de texto normal
<OutlinedInput type={showPassword ? "text" : "password"} variant="outlined" size="small" sx={{ height: 38, width: 190, }} endAdornment={ <InputAdornment position="end"> <IconButton onClick={() => setShowPassword((showPassword) => !showPassword) } onMouseDown={(event) => event.preventDefault()} edge="end" > {showPassword ? <VisibilityOff /> : <Visibility />} </IconButton> </InputAdornment> } />y aquí está el campo de texto normal -
<TextField onChange={onChange} variant="outlined" size="small" type="Text" className={classes.Text} />El problema es que mi contraseña se ve muy diferente y el clic del mouse para ingresar la contraseña no es bueno. Aquí está la captura de pantalla. ¿Cómo puedo hacer que se vea exactamente como TextField pero con ese ícono de ojo para la contraseña: mostrar y ocultar?
Está utilizando OutlineInput y TextField , respectivamente. Lo más probable es que se les apliquen diferentes reglas CSS. Use el mismo componente, o modifíquelos para que su CSS sea el mismo, y luego estará listo para comenzar.
En TextField, puede configurar endAdornment y agregar el ícono, proporciono el fragmento de código que puede probar.
<TextField label="SIP Display Name" InputProps={{ endAdornment: <IconButton> <Visibility /> </IconButton> }} ......... variant="filled" />