重现步骤
链接到实时示例:https://talosic.net
注意:错误仅在开发构建(由npm run dev提供)中抛出,而不会在生产构建中出现。实时示例是出于显而易见的原因的生产构建,因此不会显示错误
步骤:
- 使用@mui/joy 5.0.0-beta.48构建的静态应用
- 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>
- JoyTheme包含声明:
declare module '@mui/joy/Drawer' {
interface DrawerPropsSizeOverrides {
"xl": true,
}
};
- JoyTheme还在extendTheme组件定义中包含styleOverride:
JoyDrawer: {
styleOverrides: {
root: ({ ownerState }) => ({
...(ownerState.size === 'xl' && {
"--Drawer-horizontalSize": "1600px",
}),
}),
},
},
- 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>
- 当size为'xl'时,浏览器会抛出一个错误,报告如下:
警告:属性类型失败:向ForwardRef(Drawer2)
提供了无效的 propsize
值xl
,期望的是 ["sm","md","lg"]中的一个。 - 当指定'lg'时,错误不会被抛出。
- @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
1条答案
按热度按时间6rqinv9w1#
请允许我请您查看这个与Joy的抽屉相关的文件。