英文:
react.js not load css file at all
问题
我构建了这个应用程序，但在模板的某个部分加载CSS时出现了问题。
这是我的CSS文件 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;
}
这是代码：
<Box className={styles['my-page__wrapper']}>
<Box className={styles['my-page__title']}>
Hello!
</Box>
<Typography className={styles['my-page__description']}>
登录到您的账户。
</Typography>
</Box>
我的问题是类 my-page__wrapper 和 my-page__title 成功加载，但类 my-page__description 无法识别它，文本格式不正确。我搜索了一下，但没有遇到类似的问题。有人知道我的错误在哪里吗？
英文:
I build the app and I get the problem with load the CSS in part of template.
This is my CSS file 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;
}
And here is the code:
<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>
My problem is the class "my-page__wrapper" and "my-page__title" was loaded successfully, but on the class "my-page__description" it does not recognize it, and it does not format the text properly.
I searched around but didn't come across a similar problem.
Does anyone know where my mistake is?
答案1
得分: 1
Mui的Typography组件不识别className属性。相反，你应该像这样将你的类传递为一个对象：
<Typography classes={{
root: styles['my-page__description']
}}>
登录到你的账户
</Typography>
你可以在文档中了解更多关于覆盖和扩展 Mui 类名的信息。
英文:
Mui's Typography component does not recognize the className prop. Instead you should pass your classes as an object like this:
<Typography classes={{
root: styles['my-page__description']
}}>
Login to your acc.
</Typography>
You can read more about overriding and extending mui class names on the docs
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论