我正在嘗試使用帶有 React Typescript 的react-pro-sidebar自定義側邊欄。側邊欄看起來不錯，但是當側邊欄打開時，我無法使螢屏的其他部分顏色變深。
另外，我想將打開/關閉側邊欄的按鈕作為一個單獨的按鈕。在這種情況下可能嗎？
到目前為止，這是我的代碼的作業沙箱：https : //codesandbox.io/s/sleepy-lichterman-qqpp5?file=/src/App.tsx
同樣的代碼放在這里：
import * as React from "react";
import { useEffect, useState } from "react";
import { ProSidebar, Menu, MenuItem, SubMenu } from "react-pro-sidebar";
import "react-pro-sidebar/dist/css/styles.css";
export interface SidebarProps {
onChange?: (event: React.MouseEvent, isChecked?: boolean) => void;
isCheckedInitial: boolean;
}
export function Sidebar({ onChange, isCheckedInitial, ...rest }: SidebarProps) {
const [isChecked, setCheckedState] = useState(isCheckedInitial);
useEffect(() => {
setCheckedState(isCheckedInitial);
}, [isCheckedInitial]);
const handleChange = (event: React.MouseEvent) => {
setCheckedState(!isChecked);
onChange && onChange(event, isChecked);
};
return (
<ProSidebar collapsed={isChecked}>
<Menu iconShape="square">
<MenuItem onClick={handleChange}>click </MenuItem>
<SubMenu title="Top 1">
<MenuItem>Sub menu</MenuItem>
<MenuItem>Sub menu</MenuItem>
<MenuItem>Sub menu</MenuItem>
</SubMenu>
<SubMenu title="Top 2">
<MenuItem>Sub menu</MenuItem>
<MenuItem>Sub menu</MenuItem>
<MenuItem>Sub menu</MenuItem>
</SubMenu>
<SubMenu title="Top 3">
<MenuItem>Sub menu</MenuItem>
<MenuItem>Sub menu</MenuItem>
<MenuItem>Sub menu</MenuItem>
</SubMenu>
</Menu>
</ProSidebar>
);
}
export default Sidebar;
uj5u.com熱心網友回復：
您可以為此使用fixed定位div。我在這里編輯了您的示例：https : //codesandbox.io/s/kind-babycat-cg872
我在側邊欄添加了一個button和一個覆寫div：
<button onClick={handleChange}>click me</button>
// <ProSidebar ...
<div
className={`overlay ${!isChecked ? 'visible' : ''}`}
onClick={handleChange}
/>
并添加了一些css：
button {
position: relative;
z-index: 1;
}
.overlay {
position: fixed;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
}
.overlay.visible {
right: 0;
bottom: 0;
opacity: 1;
transition: opacity 0.4s;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/353986.html
標籤：javascript 反应 打字稿 反应钩子 侧边栏