页面刷新，样式修改无效，但是不手动刷新，热更新后是正常的

首页课程实战体系课手记专栏慕课教程

页面刷新，样式修改无效，但是不手动刷新，热更新后是正常的

来源：5-5 【项目重构】组件化思想实践

Boy越越

2021-06-12

<layout.header className={styles.header}></layout.header>
./Header.modules.css文件：
.header{ height:auto }

组件默认的高度是64px，我设置了一个header的样式，然后高度修改为auto。修改完保存后，项目自动热更新，看浏览样式是生效的。但是我点击浏览器的刷新按钮，刷新后的界面，header高度又变成组件默认的64px，自己设置的auto则不生效，但是className是存在的（Header_header_hash），仅仅样式不生效。

请问这是什么问题？

写回答

1回答

阿莱克斯刘

阿莱克斯刘

2021-06-14

热更新似乎对css文件不起作用，说实话以前也没太在，无非多按一次刷新嘛。。。😂

0

2

阿莱克斯刘

是我理解错了，不好意思。不过因为没看到你的代码，所以我只能推测。估计是你的更改只是局部修改，而热更新的本质只是局部热更新，所以热更新以后你的新style就起效量。但是当你刷新以后，由于css冲突，全局style会重新夺回控制权，于是你的更新反而失效了。

2021-06-15

共2条回复

React18 系统精讲结合TS打造旅游电商平台

React18 精讲 + 结合 TS 实战 + 热门业务开发，获取必备技能

1993 学习 · 1015 问题

相似问题

请问React热更新是怎么做的嘞？

回答 1

页面刷新的时候redux的store数据会清空吗？

回答 1

刷新后，redux数据丢失，如何解决

回答 1

关于react数组更新后无法更新视图

回答 1

VScode 里修改完代码，浏览器无法自动更新

回答 1

打开慕课网App查看更多内容