React 小知识 - 样式模块化

560 阅读1分钟

在 Vue 中,如果两个 dom 元素的类名取得一样,后者样式会覆盖前者样式,所以可以在 Vue 组件文件中的 style 那添加作用域 scope,这样子 Vue 就会自动帮你编译,不会引起样式冲突。
而在 React 中,也存在类似的问题,我们可以将 css 样式模块化,如有个组件中的样式文件原来叫 index.css ,将其模块化后 index.module.css ,这样是修改过后,在 React 中不会引起样式冲突。不过写法需要稍作修改,如图。


注意红框位置

image.png


接下来展示两个组件的文件对比

image.png


总之,对比应该是一目了然了。
最后,推荐一个 vscode 小插件,让你开发 react 更方便。

image.png

尝试在 React 空组件文件中,直接输入 rcc 回车。更多指令,看插件介绍。