optimize: overlay scrollbar

src/ui/Shared/Scrollbar/index.tsx

-import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
+import {
+  OverlayScrollbarsComponent,
+  OverlayScrollbarsComponentProps,
+} from "overlayscrollbars-react";
 
+/**
+ * @desc 创建漂亮的滚动条，包裹一些可能溢出的元素。
+ * @why chrome在113之后，取消了overflow: overlay的支持，所以需要使用overlayScrollbars来实现。
+ */
 export const ScrollableArea: React.FC<
-  React.ComponentProps<typeof OverlayScrollbarsComponent>
-> = ({ options, children, ...rest }) => (
-  <OverlayScrollbarsComponent
-    options={{
-      scrollbars: {
-        autoHide: "scroll",
-        theme: "os-theme-light",
-      },
-      overflow: {
-        x: "hidden",
-        y: "scroll",
-      },
-      ...options,
-    }}
-    defer
-    {...rest}
-  >
-    {children}
-  </OverlayScrollbarsComponent>
-);
+  React.PropsWithChildren<{
+    scrollProps?: OverlayScrollbarsComponentProps;
+    elementProps?: React.HTMLAttributes<HTMLElement>;
+    className?: string;
+    style?: React.CSSProperties;
+  }>
+> = ({ scrollProps = {}, elementProps, className, style, children }) => {
+  const { options = {}, ...rest } = scrollProps;
+  scrollProps;
+  return (
+    <OverlayScrollbarsComponent
+      options={{
+        scrollbars: {
+          autoHide: "scroll",
+          theme: "os-theme-light",
+        },
+        overflow: {
+          x: "hidden",
+          y: "scroll",
+        },
+        ...options,
+      }}
+      defer
+      style={{
+        height: "100%",
+      }}
+      {...rest}
+    >
+      <div className={className} style={style} {...elementProps}>
+        {children}
+      </div>
+    </OverlayScrollbarsComponent>
+  );
+};