React Router集成MantineProvider后Mantine组件失效求助

我使用ReactJS开发网站，采用Mantine作为样式组件库。但按照以下代码集成react router后，Mantine组件的样式完全失效：

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { RouterProvider, createBrowserRouter } from 'react-router-dom';
import { MantineProvider } from '@mantine/core';

import Home from './pages/Home';
import Explore from './pages/Explore';
import './index.css';

const router = createBrowserRouter([
  {
    path: '/',
    element: <Home />,
  },
  {
    path: '/explore',
    element: <Explore />,
  }
]);

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <MantineProvider>
      <RouterProvider router={router} />
    </MantineProvider>
  </StrictMode>,
);

我查阅了MantineProvider的官方文档，未找到该问题的解决方法，文档明确说明Provider应置于网站根节点位置，目前我的代码已经按照这个要求配置，但问题依然存在。

预期效果：

集成路由后的实际效果：

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