当在响应模式下查看我的菜单时（iPhone SE FWIW），我的汉堡菜单项都被隐藏了，除了一个适合我的标题和主要内容之间的空白。
我使用的是Mantine和NextJS，总体布局看起来很简单：
return (
<html lang="en">
<body>
<Providers>
<HeaderMenu links={headerLinks}/>
<div>
{children}
</div>
<FooterCentered links={footerLinks} />
</Providers>
</body>
</html>
);头文件本身是我从Mantine dev文档中复制的，并做了一些修改：
export function HeaderMenu({ links }: HeaderSearchProps) {
const [opened, { toggle }] = useDisclosure(false);
const { classes } = useStyles();
const router = useRouter();
const handleSearch = (args: string) => {
const searchUrl = '/search? Terms=' + args;
router. Push(searchUrl)
}
const items = links. Map((link) => {
const menuItems = link.links?.map((item) => (
<Menu.Item key={item. Link}>
<Link href={item.link} passHref className={classes. Link}>
{item. Label}
</Link>
</Menu.Item>
));
if (menuItems && link.links?.length > 0) {
return (
<Menu key={link.label} trigger="hover" exitTransitionDuration={0}>
<Menu.Target>
<a
key={link. Label}
href={link. Link}
className={classes. Link}
onClick={(event) => event.preventDefault()}
>
<Center>
<span className={classes.linkLabel}>{link. Label}</span>
<IconChevronDown size={12} stroke={1.5} />
</Center>
</a>
</Menu.Target>
<Menu.Dropdown>{menuItems}</Menu.Dropdown>
</Menu>
);
}
return (
<Menu key={link.label} trigger="hover" exitTransitionDuration={0}>
<Menu.Target>
<Link href={link.link} passHref className={classes. Link}>
<Center>
<span className={classes.linkLabel}>{link. Label}</span>
</Center>
</Link>
</Menu.Target>
<Menu.Dropdown>{menuItems}</Menu.Dropdown>
</Menu>
);
});
return (
<Header height={HEADER_HEIGHT} mb={28}>
<Container>
<div className={classes. Inner}>
<RoboLogo width={28} height={28} />
{/* <MantineLogo size={28} /> */}
<Group>
<Group spacing={5} className={classes. Links}>
{items}
</Group>
<SearchBox searchFunction={handleSearch} />
{/* icon={<IconSearch size={16} stroke={1.5} />} */}
</Group>
<Burger opened={opened} onClick={toggle} className={classes. Burger} size="sm" />
<Transition transition="pop-top-right" duration={200} mounted={opened}>
{(styles) => (
<Paper className={classes.dropdown} withBorder style={styles}>
{items}
</Paper>
)}
</Transition>
</div>
</Container>
</Header>
);
}当我处于全桌面模式时，我没有问题：
从阅读其他关于zIndex的文章，我尝试添加这个，但它似乎没有做任何事情：
const useStyles = createStyles((theme) => ({
dropdown: {
position: 'absolute',
top: HEADER_HEIGHT,
left: 0,
right: 0,
zIndex: -1, // <-- this
borderTopRightRadius: 0,
borderTopLeftRadius: 0,
borderTopWidth: 0,
overflow: 'hidden',
[theme.fn.largerThan('sm')]: {
display: 'none',
},
},我错过了什么？
1条答案
按热度按时间omhiaaxx1#
将上面的
useStyles修改为zIndex: 9999,就成功了。