React.js未加载CSS文件。

huangapple go评论175阅读模式
英文:

react.js not load css file at all

问题

我构建了这个应用程序,但在模板的某个部分加载CSS时出现了问题。

这是我的CSS文件 styles.module.css

  1. .my-page__title {
  2. font-weight: 300;
  3. font-size: 48px;
  4. margin-bottom: 15px;
  5. }
  6. .my-page__description {
  7. font-size: 14px;
  8. font-weight: 300;
  9. margin-bottom: 5px;
  10. }
  11. .my-page__wrapper {
  12. padding: 7px 10px;
  13. width: 100%;
  14. position: relative;
  15. }

这是代码:

  1. <Box className={styles['my-page__wrapper']}>
  2. <Box className={styles['my-page__title']}>
  3. Hello!
  4. </Box>
  5. <Typography className={styles['my-page__description']}>
  6. 登录到您的账户
  7. </Typography>
  8. </Box>

我的问题是类 my-page__wrappermy-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:

  1. .my-page__title {
  2. font-weight: 300;
  3. font-size: 48px;
  4. margin-bottom: 15px;
  5. }
  6. .my-page__description {
  7. font-size: 14px;
  8. font-weight: 300;
  9. margin-bottom: 5px;
  10. }
  11. .my-page__wrapper {
  12. padding: 7px 10px;
  13. width: 100%;
  14. position: relative;
  15. }

And here is the code:

  1. &lt;Box className={styles[&#39;my-page__wrapper&#39;]}&gt;
  2. &lt;Box className={styles[&#39;my-page__title&#39;]}&gt;
  3. Hello!
  4. &lt;/Box&gt;
  5. &lt;Typography className={styles[&#39;my-page__description&#39;]}&gt;
  6. Login to your acc.
  7. &lt;/Typography&gt;
  8. &lt;/Box&gt;

My problem is the class &quot;my-page__wrapper&quot; and &quot;my-page__title&quot; was loaded successfully, but on the class &quot;my-page__description&quot; 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属性。相反,你应该像这样将你的类传递为一个对象:

  1. <Typography classes={{
  2. root: styles['my-page__description']
  3. }}>
  4. 登录到你的账户
  5. </Typography>

你可以在文档中了解更多关于覆盖和扩展 Mui 类名的信息。

英文:

Mui's Typography component does not recognize the className prop. Instead you should pass your classes as an object like this:

  1. &lt;Typography classes={{
  2. root: styles[&#39;my-page__description&#39;]
  3. }}&gt;
  4. Login to your acc.
  5. &lt;/Typography&gt;

You can read more about overriding and extending mui class names on the docs

huangapple
  • 本文由 发表于 2023年3月10日 00:19:47
  • 转载请务必保留本文链接:https://go.coder-hub.com/75687327.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定