React中Bootstrap密码输入框图标分隔边框去除求助

要去掉图标与输入框之间的分隔边框，只需针对输入框和图标容器的相邻边框做处理：

• 给输入框添加border-end-0类，移除输入框右侧边框
• 给input-group-text添加border-start-0类，移除图标容器左侧边框
• 移除input-group-append上的bg-white，避免背景样式冲突

修改后的代码如下：

import { Icon } from "react-icons-kit";
import { eyeOff } from "react-icons-kit/feather/eyeOff";
import { eye } from "react-icons-kit/feather/eye";

<label>Password</label>
<div className="mb-3 input-group">
    <input
        type="password"
        name="password"
        className="form-control border-end-0"
        placeholder="Enter password"
        required
    />
    <span className="input-group-append">
        <span className="input-group-text bg-transparent border-start-0">
            <Icon icon={eyeOff} size={15}/>
        </span>
    </span>
</div>

原理：Bootstrap的input-group组件中，form-control和input-group-text默认都带完整边框，两者相邻的边框叠加后会显示成分隔线。移除各自的相邻边框后，就能让图标呈现嵌入输入框内的效果，同时保留输入框其他方向的边框样式一致性。

内容的提问来源于stack exchange，提问作者Bernie Zhu