在Next.js中使用Gravity UI的方法及样式无法加载的问题求助

兄弟我之前也碰到过类似的坑！先别急，咱们一步步排查样式无法加载的问题，毕竟Gravity UI本身是独立的UI库，完全不需要依赖Tailwind，肯定是配置或者引入环节出了疏漏：

• 检查全局样式的引入位置是否正确
  不同的Next.js路由模式，样式引入的地方不一样：

  • 如果你用的是Pages Router，必须在_app.js/_app.tsx里全局引入Gravity UI的核心样式：

    // _app.jsx
    import '@gravity-ui/uikit/styles/fonts.css';
    import '@gravity-ui/uikit/styles/styles.css';
    import type { AppProps } from 'next/app';
    
    export default function App({ Component, pageProps }: AppProps) {
      return <Component {...pageProps} />;
    }
    

  • 如果是App Router，要在根布局app/layout.js/layout.tsx里引入，而且要放在最顶部，不能用动态导入：

    // app/layout.jsx
    import '@gravity-ui/uikit/styles/fonts.css';
    import '@gravity-ui/uikit/styles/styles.css';
    
    export default function RootLayout({ children }) {
      return (
        <html lang="en">
          <body>{children}</body>
        </html>
      );
    }
    

• 确认依赖是否安装完整
  别漏装必要的包，重新执行一遍安装命令确保所有依赖到位：

  npm install @gravity-ui/uikit @gravity-ui/icons
  

  另外检查package.json里有没有这些依赖，避免版本不兼容的问题，尽量装最新稳定版。

• 排查Next.js配置的冲突
  如果你之前用过Tailwind，看看next.config.js里有没有Tailwind相关的配置（比如tailwind.config.js的关联），暂时注释掉试试——有时候Tailwind的全局样式优先级会覆盖Gravity UI的样式。另外如果开启了experimental.appDir，确保样式是在根布局里静态引入的，不是动态加载。

• 检查组件的使用是否规范
  比如你提到的按钮，要确保用的是Gravity UI提供的<Button>组件，而不是原生的<button>标签：

  import { Button } from '@gravity-ui/uikit';
  
  // 正确用法
  function MyComponent() {
    return <Button appearance="primary">我的按钮</Button>;
  }
  

  别写错组件导入路径或者组件名，不然只会渲染原生文本按钮。

• 排查样式优先级覆盖问题
  打开浏览器开发者工具，选中那个只有文本的按钮，看看Gravity UI的类名（比如g-btn）有没有被应用，是不是被你自己写的全局样式或者其他第三方样式覆盖了。如果是，可以给Gravity UI组件加自定义类，或者调整样式的优先级。

如果按照上面的步骤排查完还是不行，建议把你的_app.js/layout.tsx代码、package.json依赖列表贴出来，我帮你揪出具体问题！

备注：内容来源于stack exchange，提问作者Razil Khatypov