From d1dc4a75bae3f9bf7cec9a0ede9c4c2a90f7372a Mon Sep 17 00:00:00 2001
From: hymbz <hymbz3516@gmail.com>
Date: Sun, 11 Aug 2024 23:55:50 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20:bug:=20=E4=BF=AE=E5=A4=8D=E9=9D=9E?=
 =?UTF-8?q?=E5=BC=80=E5=8F=91=E7=8E=AF=E5=A2=83=E4=B8=8B=E7=9A=84=20useSty?=
 =?UTF-8?q?leSheet=20=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Fab/index.tsx                  |  3 +--
 src/components/IconButton/index.tsx           | 10 +++++---
 .../Manga/components/ComicImgFlow.tsx         |  3 +--
 src/components/Manga/components/Scrollbar.tsx |  9 ++-----
 src/components/Manga/hooks/useCssVar.ts       |  4 ++-
 src/components/Manga/hooks/useStyle.ts        | 10 ++++++++
 src/components/Manga/index.tsx                | 14 +++++------
 src/components/Toast/Toaster.tsx              |  2 +-
 src/helper/useStyle.ts                        | 25 ++++++-------------
 9 files changed, 38 insertions(+), 42 deletions(-)
 create mode 100644 src/components/Manga/hooks/useStyle.ts

diff --git a/src/components/Fab/index.tsx b/src/components/Fab/index.tsx
index a764cb36..6c6eb5a8 100644
--- a/src/components/Fab/index.tsx
+++ b/src/components/Fab/index.tsx
@@ -40,8 +40,6 @@ export interface FabProps {
  * Fab 按钮
  */
 export const Fab: Component<FabProps> = (_props) => {
-  onMount(() => useStyle(style));
-
   const props = mergeProps(
     { progress: 0, initialShow: true, autoTrans: false },
     _props,
@@ -72,6 +70,7 @@ export const Fab: Component<FabProps> = (_props) => {
 
   return (
     <div
+      ref={(ref) => useStyle(style, ref)}
       class={classes.fabRoot}
       data-show={props.show ?? show()}
       data-trans={props.autoTrans}
diff --git a/src/components/IconButton/index.tsx b/src/components/IconButton/index.tsx
index ddd6de78..7320e750 100644
--- a/src/components/IconButton/index.tsx
+++ b/src/components/IconButton/index.tsx
@@ -1,4 +1,4 @@
-import { type Component, type JSX, mergeProps, onMount } from 'solid-js';
+import { type Component, type JSX, mergeProps } from 'solid-js';
 import { useStyle } from 'helper';
 
 import classes, { css as style } from './index.module.css';
@@ -24,8 +24,6 @@ interface IconButtonProps {
 
 /** 图标按钮 */
 export const IconButton: Component<IconButtonProps> = (_props) => {
-  onMount(() => useStyle(style));
-
   const props = mergeProps({ placement: 'right' }, _props);
   let buttonRef: HTMLButtonElement;
   const handleClick: EventHandler['on:click'] = (e) => {
@@ -35,7 +33,11 @@ export const IconButton: Component<IconButtonProps> = (_props) => {
   };
 
   return (
-    <div class={classes.iconButtonItem} data-show={props.showTip}>
+    <div
+      ref={(ref) => useStyle(style, ref)}
+      class={classes.iconButtonItem}
+      data-show={props.showTip}
+    >
       <button
         ref={buttonRef!}
         aria-label={props.tip}
diff --git a/src/components/Manga/components/ComicImgFlow.tsx b/src/components/Manga/components/ComicImgFlow.tsx
index 08839937..224b8b88 100644
--- a/src/components/Manga/components/ComicImgFlow.tsx
+++ b/src/components/Manga/components/ComicImgFlow.tsx
@@ -5,10 +5,9 @@ import {
   createEffectOn,
   type UseDrag,
   useDrag,
-  useStyleMemo,
-  useStyle,
 } from 'helper';
 
+import { useStyleMemo, useStyle } from '../hooks/useStyle';
 import { refs, setState, store } from '../store';
 import { useHiddenMouse } from '../hooks/useHiddenMouse';
 import {
diff --git a/src/components/Manga/components/Scrollbar.tsx b/src/components/Manga/components/Scrollbar.tsx
index dfd4894e..d527afd0 100644
--- a/src/components/Manga/components/Scrollbar.tsx
+++ b/src/components/Manga/components/Scrollbar.tsx
@@ -5,15 +5,10 @@ import {
   Show,
   onMount,
 } from 'solid-js';
-import {
-  boolDataVal,
-  debounce,
-  createThrottleMemo,
-  useDrag,
-  useStyleMemo,
-} from 'helper';
+import { boolDataVal, debounce, createThrottleMemo, useDrag } from 'helper';
 
 import { refs, store } from '../store';
+import { useStyleMemo } from '../hooks/useStyle';
 import {
   bindRef,
   getPageTip,
diff --git a/src/components/Manga/hooks/useCssVar.ts b/src/components/Manga/hooks/useCssVar.ts
index 6f8c4515..693da939 100644
--- a/src/components/Manga/hooks/useCssVar.ts
+++ b/src/components/Manga/hooks/useCssVar.ts
@@ -1,9 +1,11 @@
 import { type JSX } from 'solid-js';
-import { t, useStyleMemo } from 'helper';
+import { t } from 'helper';
 
 import { store } from '../store';
 import classes from '../index.module.css';
 
+import { useStyleMemo } from './useStyle';
+
 /** 深色模式 */
 const darkStyle: JSX.CSSProperties = {
   '--hover-bg-color': '#FFF3',
diff --git a/src/components/Manga/hooks/useStyle.ts b/src/components/Manga/hooks/useStyle.ts
new file mode 100644
index 00000000..269142be
--- /dev/null
+++ b/src/components/Manga/hooks/useStyle.ts
@@ -0,0 +1,10 @@
+import { useStyle as _useStyle, useStyleMemo as _useStyleMemo } from 'helper';
+import { onMount } from 'solid-js';
+
+import { refs } from '../store';
+
+export const useStyle: typeof _useStyle = (css) =>
+  onMount(() => _useStyle(css, refs.root));
+
+export const useStyleMemo: typeof _useStyleMemo = (selector, styleMapArg) =>
+  onMount(() => _useStyleMemo(selector, styleMapArg, refs.root));
diff --git a/src/components/Manga/index.tsx b/src/components/Manga/index.tsx
index 096ef307..9a35afba 100644
--- a/src/components/Manga/index.tsx
+++ b/src/components/Manga/index.tsx
@@ -4,18 +4,19 @@ import {
   enableScheduling,
   onMount,
 } from 'solid-js';
-import { boolDataVal, useStyle } from 'helper';
+import { boolDataVal } from 'helper';
 
 import { ComicImgFlow } from './components/ComicImgFlow';
 import { Toolbar } from './components/Toolbar';
 import { Scrollbar } from './components/Scrollbar';
 import { TouchArea } from './components/TouchArea';
 import { EndPage } from './components/EndPage';
+import { useInit } from './hooks/useInit';
+import { useStyle } from './hooks/useStyle';
 import { useCssVar } from './hooks/useCssVar';
 import { store, type State } from './store/index';
 import { type FillEffect } from './store/image';
 import { type Option } from './store/option';
-import { useInit } from './hooks/useInit';
 import {
   bindRef,
   focus,
@@ -72,15 +73,12 @@ export interface MangaProps {
 
 /** 漫画组件 */
 export const Manga: Component<MangaProps> = (props) => {
-  onMount(() => {
-    useStyle(style);
-    useInit(props);
-  });
+  useStyle(style);
+  useCssVar();
+  onMount(() => useInit(props));
 
   createEffect(() => props.show && focus());
 
-  useCssVar();
-
   return (
     <>
       <div
diff --git a/src/components/Toast/Toaster.tsx b/src/components/Toast/Toaster.tsx
index de04b03d..39827d4b 100644
--- a/src/components/Toast/Toaster.tsx
+++ b/src/components/Toast/Toaster.tsx
@@ -19,7 +19,7 @@ export const Toaster: Component = () => {
   );
 
   onMount(() => {
-    useStyle(style);
+    useStyle(style, ref());
 
     const handleVisibilityChange = () => {
       setVisible(document.visibilityState === 'visible');
diff --git a/src/helper/useStyle.ts b/src/helper/useStyle.ts
index f1942a2f..9201f92b 100644
--- a/src/helper/useStyle.ts
+++ b/src/helper/useStyle.ts
@@ -1,21 +1,11 @@
-import { getOwner, type Accessor, type JSX } from 'solid-js';
+import { type Accessor, type JSX } from 'solid-js';
 import { createEffectOn, createRootMemo, onAutoMount } from 'helper';
-import type { Computation } from 'solid-js/types/reactive/signal';
 
-const useStyleSheet = () => {
+const useStyleSheet = (e?: Element) => {
   const styleSheet = new CSSStyleSheet();
 
-  onAutoMount((owner) => {
-    let root: Document;
-
-    if (owner) {
-      let _owner = getOwner() as Computation<unknown>;
-      while (_owner && !_owner.value)
-        _owner = _owner.owner as Computation<unknown>;
-      if (_owner === null) throw new Error('owner not found');
-      root = (_owner.value as HTMLElement).getRootNode() as Document;
-    } else root = document;
-
+  onAutoMount(() => {
+    const root = (e?.getRootNode() as Document) ?? document;
     root.adoptedStyleSheets = [...root.adoptedStyleSheets, styleSheet];
     return () => {
       const index = root.adoptedStyleSheets.indexOf(styleSheet);
@@ -26,8 +16,8 @@ const useStyleSheet = () => {
   return styleSheet;
 };
 
-export const useStyle = (css: Accessor<string> | string) => {
-  const styleSheet = useStyleSheet();
+export const useStyle = (css: string | Accessor<string>, e?: Element) => {
+  const styleSheet = useStyleSheet(e);
   if (typeof css === 'string') styleSheet.replaceSync(css);
   else createEffectOn(css, (style) => styleSheet.replaceSync(style));
 };
@@ -40,8 +30,9 @@ export type StyleMap = {
 export const useStyleMemo = (
   selector: string,
   styleMapArg: Array<StyleMap | Accessor<JSX.CSSProperties>> | StyleMap,
+  e?: Element,
 ) => {
-  const styleSheet = useStyleSheet();
+  const styleSheet = useStyleSheet(e);
   styleSheet.insertRule(`${selector} { }`);
 
   const { style } = styleSheet.cssRules[0] as CSSStyleRule;