Css Module (推荐)
React 的脚手架已经内置了 css modules 的配置：
.css/.less/.scss等样式文件都修改成.module.css/.module.less/.module.scss等；
在以前我们的文件是这样的 index.css 如果使用了 CSS 的模块化之后，在之前的文件的基础上在加上 .module 即可，如，index.module.css，改造我们之前的案例，修改 Home.css 与 About.css：
Home.module.css:
.title { font-size: 50px; color: blue; } .content { color: #464612; }
About.module.css:
.title { font-size: 50px; color: #a72153; } .content { color: #53be3b; }
Home.js:
import React from 'react'; import HomeStyle from './Home.module.css'; class Home extends React.Component { render() { return ( <div> <p className={HomeStyle.title}>我是home段落</p> <a className={HomeStyle.content} href={'https://www.cnblogs.com/yangbuyiya/'}>我是home超链接</a> </div> ) } } export default Home;
About.js:
import React from 'react'; import AboutStyle from './About.module.css'; class About extends React.Component { render() { return ( <div> <p className={AboutStyle.title}>我是About段落</p> <a className={AboutStyle.content} href={'https://www.cnblogs.com/yangbuyiya/'}>我是About超链接</a> </div> ) } } export default About;
页面展示效果：
Css Modules 优点
- 编写简单, 有代码提示, 支持所有 CSS 语法
- 解决了全局样式相互污染问题
Css Modules 缺点
- 不可以动态获取当前
state中的状态
最后
本期结束咱们下次再见👋~
🌊 关注我不迷路，如果本篇文章对你有所帮助，或者你有什么疑问，欢迎在评论区留言，我一般看到都会回复的。大家点赞支持一下哟~ 💗
