React-组件-CSS模块化
原创
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;页面展示效果：
image-20220510124229377
Css Modules 优点
- 编写简单, 有代码提示, 支持所有 CSS 语法
- 解决了全局样式相互污染问题
Css Modules 缺点
- 不可以动态获取当前
state中的状态
输入图片说明
最后
本期结束咱们下次再见👋~
🌊 关注我不迷路，如果本篇文章对你有所帮助，或者你有什么疑问，欢迎在评论区留言，我一般看到都会回复的。大家点赞支持一下哟~ 💗
输入图片说明
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
