I am using Material UI to create a password field and normal textField
<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>
}
/>
and here is the normal text field -
<TextField
onChange={onChange}
variant="outlined"
size="small"
type="Text"
className={classes.Text}
/>
The problem is that my password looks very different also the mouse click for the password entry is not good. Here is the screen shot. How can I make it look exactly like TextField but with that eye icon for password - show and hide?
You're using OutlineInput and TextField, respectively. These most likely have different CSS rules applied to them. Use the same component, or modify them so that their CSS are the same, and then you'll be good to go.
In the TextField, you can set endAdornment and add the icon, I provide the code snippet that you can try.
<TextField
label="SIP Display Name"
InputProps={{
endAdornment:
<IconButton>
<Visibility />
</IconButton>
}}
.........
variant="filled"
/>