我正在使用 React Bootstrap Modal。我正在尝试更改
closeButton<Modal.Header className='modal-head' closeButton>
<Modal.Title>Cart</Modal.Title>
</Modal.Header>
我不认为react-bootstrap库本身提供任何这样的东西。尽管您可以做的是在模式标题中添加一个右对齐的图标，并添加一个 onClick 操作来更改模式的打开状态并关闭它。
*你可以看看这个例子，也许你会更清楚。 您只需导入 LoginButton 即可。
专注于
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;
}
简单来说，您无法使用
react-bootstrapSVGCSS--bs-btn-close-bg所以，我认为它在 CSS 文件中创建自定义标签的唯一方法，如下所示：
.btn-close {
--bs-btn-close-bg: url("data:image/svg+xml,
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'
fill='white'>
<path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1
1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-
6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-
1.414z'/>
</svg>
") !important;
}
要更改图标，请修改标签
pathviewbox!importantattribute.btn-close {
--bs-btn-close-bg: url("data:image/svg+xml,
<svg xmlns='http://www.w3.org/2000/svg' viewBox="0 0 448 512"
fill='white'>
<path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5
32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3
32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-
45.3s-32.8-12.5-45.3 0l-160 160z"/>
</svg>
") !important;
}
或者如果你想改变颜色改变属性
fill='whatever you want'rgbargb#code-colorfill="rgb(13 110 253)" //or
fill="#84b6f4" //or
fill="rgba(0, 255, 25, 0.8)"
这个例子是纯 HTML 和 CSS，但逻辑是相同的，因为这里唯一重要的东西来自 App.css 或你的 file.css
.btn-close {
--bs-btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='black'><path d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z'/></svg>") !important
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<!-- Button trigger modal -->
<div class="text-center">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>