Changing React Bootstrap Modal.Header closeButton icon - html

Question

I am working with React Bootstrap Modal. I'm trying to change the closeButton icon. But it didn't work.
<Modal.Header className='modal-head' closeButton>
<Modal.Title>Cart</Modal.Title>
</Modal.Header>

Answer 1

I don't think react-bootstrap library provides anything as such by itself. Although what you can do it add an icon right aligned in the modal header and add an onClick action which changes the modal's open state and closes it.

Answer 2

*You can take a look to this example, maybe it will be more clear to you.
You have just to import LoginButton.
Focus on
handleShow
export const LoginButton = () => {
const [fullscreen, setFullscreen] = useState(true);
const [show, setShow] = useState(false);
function handleShow(breakpoint) {
setShow(breakpoint);
setFullscreen(true);
}
return (
<div>
<Button className="me-2 mb-2" onClick={() => handleShow(true)}>
Login
</Button>
<Modal className="Modal_Login" show={show} fullscreen={fullscreen} onHide={() => setShow(false)} >
<Modal.Header className="Modal_Login_header" >
<Modal.Title className=" Modal_Login_header_title col-md-4" >Login</Modal.Title>
<Button className="col-md-2" onClick={() => handleShow(false)}> CLose </Button>
</Modal.Header>
<Modal.Body>Modal body content</Modal.Body>
</Modal>
</div>
)
};
CSS:
.Modal_Login{
display: flex;
flex-direction:row;
}
.Modal_Login_header{
display: flex;
flex-direction:row;
justify-content: flex-end;
}