first prototype of StackedRouter

src/material/BottomSheet.css

@@ -25,22 +25,6 @@
 
   box-shadow: var(--tutu-shadow-e16);
 
-  .MuiToolbar-root {
-    >.MuiButtonBase-root {
-
-      &:first-child {
-        margin-left: -0.5em;
-        margin-right: 24px;
-      }
-
-      &:last-child {
-        margin-right: -0.5em;
-        margin-left: 24px;
-      }
-
-    }
-  }
-
   @media (max-width: 560px) {
     & {
       left: 0;

src/material/Scaffold.css

@@ -1,22 +1,42 @@
-
-.Scaffold__topbar {
+.Scaffold>.topbar {
   position: sticky;
   top: 0px;
   z-index: var(--tutu-zidx-nav, auto);
+
+  .MuiToolbar-root {
+    >.MuiButtonBase-root {
+      &:first-child {
+        margin-left: -0.5em;
+        margin-right: 24px;
+      }
+
+      &:last-child {
+        margin-right: -0.5em;
+        margin-left: 24px;
+      }
+
+    }
+  }
 }
 
-.Scaffold__fab-dock {
+.Scaffold>.fab-dock {
   position: fixed;
   bottom: 40px;
   right: 40px;
   z-index: var(--tutu-zidx-nav, auto);
 }
 
-.Scaffold__bottom-dock {
+.Scaffold>.bottom-dock {
   position: sticky;
   bottom: 0;
   left: 0;
   right: 0;
   z-index: var(--tutu-zidx-nav, auto);
   padding-bottom: var(--safe-area-inset-bottom, 0);
+}
+
+.Scaffold {
+  height: 100%;
+  width: 100%;
+  background-color: var(--tutu-color-surface);
 }

src/material/Scaffold.tsx

@@ -28,42 +28,48 @@ const Scaffold: Component<ScaffoldProps> = (props) => {
     "bottom",
     "children",
     "ref",
+    "class",
   ]);
   const [topbarElement, setTopbarElement] = createSignal<HTMLElement>();
 
   const topbarSize = createElementSize(topbarElement);
 
   return (
-    <>
+    <div
+      class={`Scaffold ${managed.class || ""}`}
+      ref={(e) => {
+        createRenderEffect(() => {
+          e.style.setProperty(
+            "--scaffold-topbar-height",
+            (topbarSize.height?.toString() ?? 0) + "px",
+          );
+        });
+
+        if (managed.ref) {
+          (managed.ref as (val: typeof e) => void)(e);
+        }
+      }}
+      {...rest}
+    >
       <Show when={props.topbar}>
-        <div class="Scaffold__topbar" ref={setTopbarElement} role="presentation">
+        <div class="topbar" ref={setTopbarElement} role="presentation">
           {props.topbar}
         </div>
       </Show>
       <Show when={props.fab}>
-        <div class="Scaffold__fab-dock" role="presentation">{props.fab}</div>
+        <div class="fab-dock" role="presentation">
+          {props.fab}
+        </div>
       </Show>
-      <div
-        ref={(e) => {
-          createRenderEffect(() => {
-            e.style.setProperty(
-              "--scaffold-topbar-height",
-              (topbarSize.height?.toString() ?? 0) + "px",
-            );
-          });
 
-          if (managed.ref) {
-            (managed.ref as (val: typeof e) => void)(e);
-          }
-        }}
-        {...rest}
-      >
-        {managed.children}
-      </div>
+      {managed.children}
+
       <Show when={props.bottom}>
-        <div class="Scaffold__bottom-dock" role="presentation">{props.bottom}</div>
+        <div class="bottom-dock" role="presentation">
+          {props.bottom}
+        </div>
       </Show>
-    </>
+    </div>
   );
 };