material-ui [joy-ui] 在开发构建中覆盖抽屉大小抛出浏览器错误

n7taea2i  于 6个月前  发布在  其他
关注(0)|答案(1)|浏览(45)

重现步骤

链接到实时示例:https://talosic.net
注意:错误仅在开发构建(由npm run dev提供)中抛出,而不会在生产构建中出现。实时示例是出于显而易见的原因的生产构建,因此不会显示错误
步骤:

  1. 使用@mui/joy 5.0.0-beta.48构建的静态应用
  2. main.tsx将所有内容 Package 在一个主题组件中
<React.StrictMode>
    <MaterialCssVarsProvider theme={{ [MATERIAL_THEME_ID]: MaterialTheme}}>
      <JoyCssVarsProvider theme={JoyTheme}>
        <Provider store={store}>
          <RouterProvider router={router} />
        </Provider>
      </JoyCssVarsProvider>
    </MaterialCssVarsProvider>
  </React.StrictMode>
  1. JoyTheme包含声明:
declare module '@mui/joy/Drawer' {
  interface DrawerPropsSizeOverrides {
    "xl": true,
  }
};
  1. JoyTheme还在extendTheme组件定义中包含styleOverride:
JoyDrawer: {
      styleOverrides: {
        root: ({ ownerState }) => ({
          ...(ownerState.size === 'xl' && {
            "--Drawer-horizontalSize": "1600px",
          }),
        }),
      },
    },
  1. Page包含一个如下定义的抽屉:
<Drawer
    size="xl"
    anchor="right"
    variant="plain"
    open={false}
    onClose={() => {
        //
    }}
    slotProps={{
    content: {
        sx: {
            bgcolor: 'transparent',
            p: { md: 3, sm: 0 },
            boxShadow: 'none',
        },
    },
    }}
    disableEscapeKeyDown={true}
>
    <Sheet
        sx={{
            borderRadius: 'md',
            p: 2,
            display: 'flex',
            flexDirection: 'column',
            gap: 2,
            height: '100%',
            overflow: 'auto',
        }}
    >
        
    </Sheet>
</Drawer>
  1. 当size为'xl'时,浏览器会抛出一个错误,报告如下:
    警告:属性类型失败:向 ForwardRef(Drawer2) 提供了无效的 prop sizexl ,期望的是 ["sm","md","lg"]中的一个。
  2. 当指定'lg'时,错误不会被抛出。
  3. @mui/joy/CircularProgress已经为自定义和标准尺寸定义了类似的尺寸覆盖,没有生成错误。

当前行为

函数是正确的,抽屉的大小也是正确的,但在开发模式下会抛出错误。

预期行为

相同的功能,但没有警告。

上下文

尝试允许使用XL尺寸的抽屉。

你的环境中

npx @mui/envinfo

System:
    OS: Linux 5.14 Red Hat Enterprise Linux 9.3 (Plow)
  Binaries:
    Node: 20.11.1 - /usr/bin/node
    npm: 10.2.4 - /usr/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: Version 126.0.6478.127 (Official Build) (64-bit)
    Edge: Version 126.0.2592.102 (Official build) (64-bit)
  npmPackages:
    @emotion/react: ^11.11.1 => 11.11.4 
    @emotion/styled: ^11.11.0 => 11.11.5 
    @mui/base:  5.0.0-beta.40 
    @mui/core-downloads-tracker:  5.16.4 
    @mui/joy: ^5.0.0-beta.2 => 5.0.0-beta.48 
    @mui/material: ^5.14.14 => 5.16.4 
    @mui/private-theming:  5.16.4 
    @mui/styled-engine:  5.16.4 
    @mui/system:  5.16.4 
    @mui/types:  7.2.15 
    @mui/utils:  5.16.4 
    @types/react: ^18.2.15 => 18.3.3 
    react: ^18.2.0 => 18.3.1 
    react-dom: ^18.2.0 => 18.3.1 
    typescript: ^5.1.6 => 5.5.3
6rqinv9w

6rqinv9w1#

请允许我请您查看这个与Joy的抽屉相关的文件。

相关问题