重复问题
- 我已搜索现有的问题
最新版本
- 我已测试了最新版本
摘要 💡
我们希望使用 nav
-html-元素来呈现 Drawer
。如果 Drawer
能提供一个类似于大多数其他MUI组件的 component
-prop,那么这将很容易实现。
示例 🌈
<Drawer variant="permanent" component="nav" />
动机 🔦
在html DOM树中保持正确的语义。
我们希望使用 nav
-html-元素来呈现 Drawer
。如果 Drawer
能提供一个类似于大多数其他MUI组件的 component
-prop,那么这将很容易实现。
<Drawer variant="permanent" component="nav" />
在html DOM树中保持正确的语义。
5条答案
按热度按时间jbose2ul1#
@delijah The Drawer确实支持组件属性-当variant="temporary"(默认值)设置时,Modal组件的属性可用:https://www.mui.com/material-ui/api/modal/
这里有一个工作沙箱:https://codesandbox.io/p/sandbox/https-github-com-mui-material-ui-issues-40141-7k5hpf?file=%2Fsrc%2FDemo.tsx
l5tcr1uw2#
@delijah The Drawer确实支持component prop - 当variant="temporary"(默认值)设置时,Modal组件的props可用: https://www.mui.com/material-ui/api/modal/
你是对的。抱歉,我忘记提供一个示例并提及,我们正在使用variant "permanent"。我们实际上可以提供一个"component"-prop,但正确的组件不会在dom中渲染。即使我们提供了
component="nav"
,仍然会使用div。vybvopom3#
我们应该支持其他变体的
component
属性。我添加了waiting for upvotes
标签,以便社区可以为它投票。不过,我认为我们不会在 v5 中发布这个,因为我们将其冻结以专注于 v6。我们可以在 v6 或 v7 中添加它。在此期间,我可以想到两种解决方法:
PaperProps={{ component: 'nav' }}
: https://codesandbox.io/p/sandbox/material-40141-workaround-1-s6pvfx?file=%2Fsrc%2FDemo.tsxas="nav"
,但你需要使用@ts-ignore
:https://codesandbox.io/p/sandbox/material-40141-workaround-2-tfz7ct?file=%2Fsrc%2FDemo.tsxwz8daaqr4#
太棒了,谢谢你@DiegoAndai!
e0uiprwp5#
@mj12albert@DiegoAndai在问题描述中添加了我们的支持密钥。