如何修改React Bootstrap Modal.Header的closeButton图标？

React Bootstrap 中Modal.Header的closeButton是组件内置封装的渲染逻辑，直接在Header上加类名无法修改内部渲染的默认图标，可通过以下两种方式实现自定义：

• 方案1：移除内置closeButton，手动实现自定义关闭按钮（推荐，灵活度最高）
  去掉Modal.Header上的closeButton属性，自行在Header内添加关闭按钮，绑定Modal的关闭回调即可，完全可控图标、交互样式：

  import { useState } from 'react';
  import { Modal, Button } from 'react-bootstrap';
  
  export default function CartModal() {
    const [show, setShow] = useState(false);
    const handleClose = () => setShow(false);
  
    return (
      <Modal show={show} onHide={handleClose}>
        <Modal.Header className='modal-head'>
          <Modal.Title>Cart</Modal.Title>
          {/* 自定义关闭按钮，完全替代默认closeButton */}
          <Button
            variant=""
            className="custom-close position-absolute end-4 top-4 p-0 border-0 bg-transparent"
            onClick={handleClose}
            aria-label="关闭弹窗"
          >
            {/* 此处替换为你的自定义图标，支持img、svg、第三方图标库组件 */}
            <img src="/assets/close-icon.png" alt="关闭" width={18} height={18} />
          </Button>
        </Modal.Header>
        {/* 其余Modal内容按原有逻辑编写 */}
      </Modal>
    )
  }
  

  可通过配套CSS调整按钮的位置、交互态，和默认关闭按钮的视觉位置对齐。

• 方案2：保留内置closeButton，通过CSS覆盖默认图标样式
  保留原有closeButton属性不改动，通过高优先级CSS选中内置关闭按钮，替换其默认图标：

  /* 匹配Modal.Header内的内置关闭按钮，Bootstrap5版本类名为btn-close，Bootstrap4版本替换为.close即可 */
  .modal-head .btn-close {
    /* 清除默认图标 */
    background: none !important;
    /* 替换为自定义图标 */
    background-image: url('/assets/close-icon.png') !important;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 1;
    width: 18px;
    height: 18px;
  }
  /* 可自定义hover、focus等交互态样式 */
  .modal-head .btn-close:hover {
    opacity: 0.6;
  }
  

  注意：必须加足够的样式优先级（比如搭配父级类名、!important），否则会被Bootstrap默认样式覆盖不生效。

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