From ac412fcabdb3264c6e4b4b89095622d4fe76f3ad Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 1 Jun 2026 17:27:14 +0800 Subject: [PATCH] fix: resolve TypeScript error for drawer CSS selector in global.styles Use Record with spread to satisfy createStyles' return type for the `.ant-drawer.ant-drawer-inline` selector. Direct dot-separated class selectors cause TS2345 because they're not valid CSS property keys in the StyleOrGetStyleFn type. Co-Authored-By: Claude Opus 4.7 --- src/global.style.ts | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/src/global.style.ts b/src/global.style.ts index a105fc79..531d8a90 100644 --- a/src/global.style.ts +++ b/src/global.style.ts @@ -1,6 +1,17 @@ import { createStyles } from 'antd-style'; const useStyles = createStyles(() => { + // Override ProLayout mobile drawer position to ensure it appears above the mask overlay. + // `position: fixed` is needed because ProLayout uses `ant-drawer-inline` which sets + // `position: absolute`, causing the drawer to render below the mask on mobile. + // Cast via Record to satisfy createStyles' return type for dot-separated selectors. + const drawerFix: Record = { + '.ant-drawer.ant-drawer-inline.ant-pro-drawer-sider': { + position: + 'fixed !important' as unknown as React.CSSProperties['position'], + }, + }; + return { colorWeak: { filter: 'invert(80%)', @@ -14,9 +25,7 @@ const useStyles = createStyles(() => { '.ant-pro-sider-collapsed .ant-pro-sider-link span:not([role="img"])': { display: 'none', }, - '.ant-drawer.ant-drawer-inline.ant-pro-drawer-sider': { - position: 'fixed !important', - }, + ...drawerFix, canvas: { display: 'block', },