如何使两个Input控件元素在背景和边框方面看起来完全相同?

Question

我使用Material UI来创建密码字段和正常的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>
}
/>

这里是正常的文本域-

<TextField

onChange={onChange}
variant="outlined"
size="small"
type="Text"
className={classes.Text}
/>

问题是我的密码看起来非常不同，鼠标点击密码输入也不好。这是屏幕截图。我怎么能使它看起来完全像TextField，但与眼睛图标的密码-显示和隐藏?

图标按钮和TextField

Answer 1

您分别使用OutlineInput和TextField。它们很可能应用了不同的CSS规则。使用相同的组件，或者修改它们，使它们的CSS相同，然后你就可以很好地使用了。

Answer 2

在TextField中，您可以设置end装饰品并添加图标，我提供了您可以尝试的代码片段。

<TextField
label="SIP Display Name"
InputProps={{
endAdornment: 
<IconButton>
<Visibility />
</IconButton>
}}
.........
variant="filled"
/>