Mantine Radio组件显示异常求助（Next.js+Tailwind环境）

问题根源 #

1. 版本不兼容：你使用的@mantine/next是v6.0.21，但其他Mantine核心包均为v7.0.0，版本不一致直接导致组件样式与逻辑混乱，这是SVG分离、按钮不可点击的核心原因。
2. 样式冲突：直接给RadioGroup添加Tailwind的flex类，打乱了Mantine组件内置的布局结构，引发SVG尺寸异常。

解决步骤 #

1. 统一Mantine版本 #

将@mantine/next升级至v7.0.0，与其他Mantine包版本对齐：

npm install @mantine/next@7.0.0

修改后package.json中的相关依赖应如下：

{
  "dependencies": {
    "@mantine/carousel": "^7.0.0",
    "@mantine/core": "^7.0.0",
    "@mantine/dates": "^7.0.0",
    "@mantine/form": "^7.0.0",
    "@mantine/hooks": "^7.0.0",
    "@mantine/next": "^7.0.0", // 必须与其他Mantine包版本一致
    // 其他依赖保持不变
  }
}

2. 用Mantine内置属性实现横向布局 #

不要直接使用Tailwind的flex类，Mantine的RadioGroup自带横向排列属性，通过orientation和gap控制布局：

import { MantineProvider, Radio, RadioGroup } from "@mantine/core";
// 注意：若使用Next.js App Router，需改用@mantine/next提供的MantineProvider
// import { MantineProvider } from '@mantine/next';

export default function Home() {
  return (
    <MantineProvider>
      {/* 用orientation="horizontal"实现横向排列，gap控制选项间距 */}
      <RadioGroup orientation="horizontal" gap="md">
        <Radio name="contact" value="email" label="Email" />
        <Radio name="contact" value="phone" label="Phone" />
      </RadioGroup>
    </MantineProvider>
  );
}

3. 修复Tailwind与Mantine的样式优先级（可选） #

若仍存在样式异常，在tailwind.config.js中关闭Tailwind预飞行样式，避免与Mantine冲突：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  corePlugins: {
    preflight: false, // 关闭Tailwind默认全局样式，避免与Mantine冲突
  },
  theme: {
    extend: {},
  },
  plugins: [],
};

验证效果 #

完成上述修改后，Radio组件的SVG会正确替换原生按钮，不再分离；按钮可正常点击触发选中状态；横向布局正常，SVG尺寸也不会异常放大。

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