React, Mantine, CSS Modules Do Not Load Properly

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".

You need to sign in to view this answers

Related Post