Question 401773 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Using MantineProvider with React Router

I am writing a website in ReactJS and I am using Mantine for styling. When I try to use react router as seen below, the mantine components no longer work.

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>,
);

I read about the MantineProvider but couldn’t find anything about this issue/ how to fix it. It says the provider should be at the root of the website.

This is what its meant to look like.

enter image description here

This is what it looks like when adding the router

enter image description here

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The fix was adding this import in main.tsx:

    import '@mantine/core/styles.css';  // Adjust path if necessary

  2. 0

    is this your issue – https://github.com/orgs/mantinedev/discussions/6277

    also added a solution that should work, check both and let me know if it works!

    Make sure that your custom CSS (index.css) doesn’t override Mantine’s styles unless intended. It’s better to import Mantine styles first, then your custom CSS.

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

import './index.css'; // Ensure this doesn't override Mantine styles

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

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

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <MantineProvider>
      <RouterProvider router={router} />
    </MantineProvider>
  </StrictMode>,
);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search