I recently developed an app and encountered an issue with loading the CSS for a specific part of the template.
The CSS file I am using is named styles.module.css:
.my-page__title {
font-weight: 300;
font-size: 48px;
margin-bottom: 15px;
}
.my-page__description {
font-size: 14px;
font-weight: 300;
margin-bottom: 5px;
}
.my-page__wrapper {
padding: 7px 10px;
width: 100%;
position: relative;
}
Below is the code snippet causing the issue:
<Box className={styles['my-page__wrapper']}>
<Box className={styles['my-page__title']}>
Hello!
</Box>
<Typography className={styles['my-page__description']}>
Login to your acc.
</Typography>
</Box>
The problem lies in the fact that while the classes "my-page__wrapper" and "my-page__title" are properly loaded, the one for "my-page__description" is not recognized, leading to improper text formatting. I have searched for solutions but haven't found any similar issues reported. Can anyone help me identify where my mistake might be?