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
Leave feedback about this