react中如何做到css样式私有

【附注信息  ----> 关注公众号：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样式。还挺好用的。