Shadcn Dialog组件移动端左右边距添加失败求助

• 替换默认居中样式：Shadcn的DialogContent默认带有mx-auto类，会覆盖你添加的mx-5。直接在DialogContent上设置className="mx-5 sm:mx-auto"，移动端使用mx-5，大屏自动切换回居中的mx-auto。示例代码：

<DialogContent className="mx-5 sm:mx-auto">
  {/* 对话框内容 */}
</DialogContent>

• 强制优先级或用内联样式兜底：如果上述方法不生效，给margin类加!提升优先级：!mx-5；或者直接用内联样式确保生效：

<DialogContent style={{ marginLeft: '1.25rem', marginRight: '1.25rem' }} className="sm:mx-auto">
  {/* 对话框内容 */}
</DialogContent>

• 修改组件默认配置：找到项目中的components/ui/dialog.tsx文件，修改DialogContent的默认className，把原有的mx-auto替换为mx-5 sm:mx-auto，这样所有使用该组件的地方都会自动应用边距规则：

const DialogContent = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <DialogPrimitive.Content
    ref={ref}
    className={cn(
      "fixed left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] border bg-background p-6 shadow-lg transition-all sm:rounded-lg",
      "mx-5 sm:mx-auto", // 替换原mx-auto配置
      className
    )}
    {...props}
  >
    {children}
    <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
      <X className="h-4 w-4" />
      <span className="sr-only">Close</span>
    </DialogPrimitive.Close>
  </DialogPrimitive.Content>
))

• 排查全局样式冲突：打开浏览器开发者工具，查看DialogContent元素的margin属性，确认是否有全局样式在覆盖你的设置，找到后针对性调整样式优先级即可。

内容的提问来源于stack exchange，提问作者CharlesInCharge