更改 React Bootstrap Modal 的关闭按钮图标

npm install react-bootstrap bootstrap

import React, { useState } from 'react';
import { Modal } from 'react-bootstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; // 示例：使用 Font Awesome 图标
import { faTimes } from '@fortawesome/free-solid-svg-icons'; // 示例：引入叉号图标
import 'bootstrap/dist/css/bootstrap.min.css';

function MyModal() {
  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  return (
    <>
      <button onClick={handleShow}>打开 Modal</button>

      <Modal show={show} onHide={handleClose}>
        <Modal.Header className="modal-head" style={{position: 'relative'}}>
          <Modal.Title>Cart</Modal.Title>
          <FontAwesomeIcon
            icon={faTimes}
            style={{
              position: 'absolute',
              top: '10px',
              right: '10px',
              cursor: 'pointer',
            }}
            onClick={handleClose}
          />
        </Modal.Header>
        <Modal.Body>
          Modal 内容
        </Modal.Body>
        <Modal.Footer>
          <button onClick={handleClose}>关闭</button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

export default MyModal;

<FontAwesomeIcon
    icon={faTimes}
    className="custom-close-icon"
    onClick={handleClose}
/>

.custom-close-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  /* 添加更多样式，例如颜色、大小等 */
}