当我将屏幕大小更改为移动视图或在移动设备中使用我的网络应用程序时，店员/nextjs 的用户按钮不起作用

Question

“@clerk/nextjs 中的 UserButton 在移动视图上立即关闭”

身体： 我在 Next.js 应用程序中遇到来自 @clerk/nextjs 的 UserButton 组件的问题。当我在全尺寸笔记本电脑屏幕上使用它时，一切都按预期工作。但是，当我将屏幕分辨率更改为移动设备或在移动设备上使用它时，“UserButton”对话框在单击后立即关闭，不允许我与其功能进行交互。

详情：

UserButton 组件用于处理用户身份验证和相关功能。 在全尺寸屏幕上，按钮正常工作，并且对话框按预期显示。 在移动设备上使用应用程序或将屏幕分辨率调整为较小尺寸时会出现此问题。 控制台中不会显示错误消息，因此很难确定根本原因。 我检查过的事情：

已验证 UserButton 的样式是否响应灵敏且适合较小的屏幕。 检查浏览器控制台中是否有任何错误，但没有发现任何错误。 在我的移动设备上的不同浏览器上测试了该应用程序，问题仍然存在。

代码示例：

import { CurrentProfile } from "@/lib/current-profile"
import { db } from "@/lib/db";
import { redirect } from "next/navigation";
import NavigationAction from "@/components/navigation/navigation-action";
import { Separator } from "../ui/separator";
import { ScrollArea } from "../ui/scroll-area";
import { NavigationItem } from "./navigation-item";
import { ModeToggle } from "../mode-toggle";
import { UserButton } from "@clerk/nextjs";

export const NavigationSidebar = async()=>{

    const profile = await CurrentProfile();

    if(!profile){
        return redirect('/');
    }

    const servers = await db.server.findMany({
        where:{
            members:{
                some:{
                    profileId:profile.id,
                }
            }
        }
    })
    return(
        <div className=" space-y-4 flex flex-col items-center h-full text-primary w-full dark:bg-[#1E1F22] bg-[#E3E5E8] py-3">
            <NavigationAction />

        <Separator className="h-[2-px] bgzinc300 dark:bgzinc700 rounded-md w-10 mx-auto"/>
 
        <ScrollArea className=" flex-1 w-full">
            {
                servers.map((server)=>(
                    <div className=" mb-4" key={server.id}>
    <NavigationItem 
    id={server.id}
    name={server.name}
    imageUrl={server.imageUrl}
    />
                    </div>
                ))
            }

        </ScrollArea>

<div className="pb-3 mt-auto flex items-center flex-col gap-y-4">
<ModeToggle />
<UserButton afterSignOutUrl="/" appearance={{
    elements:{
        avatarBox:"h-[48px] w-[48px]"
    }
}} />
</div>
        </div>
    )

}

当然！以下是关于您已尝试过的内容和您所期望的内容的建议部分：

我尝试过的： 我已采取以下步骤来解决该问题：

检查响应式样式：确保 UserButton 组件的样式响应式且适合较小的屏幕。已验证按钮应适应不同的屏幕尺寸。

错误控制台：检查浏览器控制台是否有与 UserButton 相关的任何错误消息或警告。不过测试过程中并没有显示任何错误。

浏览器兼容性：在我的移动设备上的不同浏览器上测试应用程序，以排除任何特定于浏览器的问题。

期望： 我希望 UserButton 组件能够在不同的屏幕尺寸和设备上一致地运行。当单击较小屏幕或移动设备上的按钮时，我预计会打开对话框并允许与身份验证功能进行交互，就像在全尺寸笔记本电脑屏幕上一样。

不幸的是，尽管做出了这些努力，在移动设备或屏幕分辨率较小的情况下使用该应用程序时，单击后“用户按钮”对话框会立即关闭。

我正在寻求有关潜在解决方案的指导，或寻求有关 UserButton 在移动屏幕上表现不同的原因的见解。任何帮助或建议将不胜感激。

Answer 1

我想我知道这个片段。

这可能是因为 shadcn 的工作表和 clerks userbutton 的弹出窗口之间的 z-index 重叠。如果你检查开发工具你就会找到它。

但是，通过

userProfileProps

编辑 z-index 本身并不能解决问题。用户按钮的弹出框仍将保留在 shadcn 工作表后面。

有几个解决方法：

1. 当在 Sheet 组件中渲染时，您可以将

   userProfileMode

   中的

   UserButton

   设置为

   navigation

   ，或者
2. 您可以创建一个自定义组件来渲染您的职员档案 UI，并使用

   UserProfile

   而不是

   UserButton

   ，因为一旦您从

   UserProfile

    单击 

   Manage Account

   ，职员也会渲染 

   UserButton

p.s：但是如果你已经解决了这个重叠问题，如果你能分享解决方案那就太好了。