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/BNTang/'}>我是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/BNTang/'}>我是About超链接</a>
</div>
)
}
}
export default About;
页面展示效果:
Css Modules 优点
- 编写简单, 有代码提示, 支持所有 CSS 语法
- 解决了全局样式相互污染问题
Css Modules 缺点
- 不可以动态获取当前
state
中的状态