【附注信息 ----> 关注公众号:CS阿吉,大家一起分享更多的技术文章,聊天技术问题。】
提问原因:在一个.css文件中的header类设置颜色为黑色,页面效果却是红色。发现在app.css中设置header类的color:red;
提问:如何私有css?(在vue中通过scoped使得css样式变为私有)
解决:
一。根本办法:
用css module完全可以做,在create-react-app中使用css modules
这里又分为两种方式:一种引入,一种修改配置
(1)。引入(推荐使用这个)
import React, { Component } from 'react';
import styles from './Button.module.css'; // 使用 CSS Modules 的方式引入
//在 css 文件后面加 .module 后缀
import './another-stylesheet.css'; // 普通引入
class Button extends Component {
render() {
// reference as a js object
return <button className={styles.error}>Error Button</button>;
}
}
(2)(这个我用着出错)
对于css modules,在react中,通常用它来避免预料之外样式规则相互覆盖以及实现其他功能。
弹出配置文件:npm run eject。出错的话见我之前的一片文章。
运行完成之后,打开 config 目录下的 webpack.config.js 文件,找到 test: cssRegex
这一行
在 use 属性执行的方法中添加 modules: true
用法同上,只是不需要加.module.css了
二。简略办法:(你明白的话用这个也行,就是这个也挺麻烦的)
就是在外面套一个组件名的class,然后再嵌你的类名
index.css
.a .c {
//.......
}
.b .c {
//........
}
app.js
<div>
<div className='a'>
<div className='c'></div>
</div>
<div className='b'>
<div className='c'></div>
</div>
</div>
三。官方建议:
react的样式管理是比较弱的,官方是建议把style直接写到jsx标签里
这里我找到的用法是使用styled-components这个模块,把css文件改为js文件。然后在这个js文件里面写小组件,组件包含css样式。还挺好用的。