Browse Source

fix: resolve TypeScript error for drawer CSS selector in global.styles

Use Record<string, React.CSSProperties> 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 <noreply@anthropic.com>
afc163 4 months ago
parent
commit
6d6be15cc4
  1. 15
      src/global.style.ts

15
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<string, React.CSSProperties> = {
'.ant-drawer.ant-drawer-inline.ant-pro-drawer-sider': {
position:
'fixed !important' as unknown as React.CSSProperties['position'],
},
};
return {
colorWeak: {
filter: 'invert(80%)',
@ -11,9 +22,7 @@ const useStyles = createStyles(() => {
'ant-pro-sider.ant-layout-sider.ant-pro-sider-fixed': {
left: 'unset',
},
'.ant-drawer.ant-drawer-inline.ant-pro-drawer-sider': {
position: 'fixed !important',
},
...drawerFix,
canvas: {
display: 'block',
},

Loading…
Cancel
Save