React, Mantine, CSS Modules Do Not Load Properly

Question

I'm developing a React project with TypeScript and Mantine. I'm using CSS Modules for styling components. However, at seemingly random times, the CSS stops loading (as far as I can observe from DevTools), and the webpage looks like it has no CSS applied.

When I remove each import of the CSS Module in respective components, save the change, and re-add the CSS Module imports, the webpage returns to normal.

I have tried methods like defining the CSS Modules as a module in global.d.ts but no method seems to work so far.

Why would this be? How can I solve this issue?

An Example Component (Title.tsx):

import styles from './Title.module.css';
import { Text } from '@mantine/core';

interface TitleProps {
  text: string;
}

const Title = ({ text }: TitleProps) => {
  return (
    <>
      <Text className={styles.title}>{text}</Text>
    </>
  );
};

export default Title;

An Example CSS Module (Title.module.tsx):

.title {
  font-size: 3rem;
  font-weight: bold;
  text-align: center;
  background: linear-gradient(180deg, #5c92e2, #1278ec);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Both the component and the module are in the same directory. I also have import '@mantine/core/styles.css'; in my index.tsx file. My devDependencies (in package.json) include "@types/css-modules": "^1.0.5".

Answer 1

I fixed the problem by moving the import statement for @mantine/core/styles.css to the top of my index.tsx file.

Previous version:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { MantineProvider } from '@mantine/core';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Main from './pages/Main';
import '@mantine/core/styles.css'; // wrong order

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

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <MantineProvider>
      <RouterProvider router={router} />
    </MantineProvider>
  </React.StrictMode>
);

Current version:

import '@mantine/core/styles.css'; // correct order
import React from 'react';
import ReactDOM from 'react-dom/client';
import { MantineProvider } from '@mantine/core';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Main from './pages/Main';

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

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <MantineProvider>
      <RouterProvider router={router} />
    </MantineProvider>
  </React.StrictMode>
);