'How to get the two Input control elements look exactly same in terms of background and border?

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?

Icon button and TextField

javascripthtmlcssmaterial-uijavaandroidandroid-studio


Solution 1:[1]

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.

Solution 2:[2]

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"
        />

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Lansana Camara
Solution 2

Related Questions