react样式的私有化方法

由于react的样式管理是比较弱的，官方是建议把style直接写到jsx标签里

当然这种处理的方式显然不是特别适合,这样就造成了样式与标签耦合在一起了,我们知道在VUE中的利用scoped做到了样式私有化,react的样式私有化有以下几种处理方法:

1.利用css module来解决

这里有一篇关于css modoule的文章

1.1 在create-react-app中使用css modules的方法

import React from 'react';
//注意App.module.css中多了一个module关键字
import style from './App.module.css';

export default () => {
  return (
    <h1 className={style.title}>
      Hello World
    </h1>
  );
};

而在css的命名必须为: App.module.css

.title {
	font-szie: 50px;
}

这样就可以在代码中使用了,编辑结果形式如下图:

而css module的做法就是:

产生局部作用域的唯一方法，就是使用一个独一无二的class的名字，不会与其他选择器重名。这就是 CSS Modules 的做法。

1.2 构建的webpack实现css Module

此时在react中的引入是一样的,但是css样式文件名不需要再加上module关键字了,但是需要webpack配合:

// App.css: 

.title {
	font-szie: 50px;
}

webpack代码:

上面代码中，关键的一行是style-loader!css-loader?modules，它在css-loader后面加了一个查询参数modules，表示打开 CSS Modules 功能。而

localIdentName=[path][name]---[local]---[hash:base64:5]

这句的含义是定制hash后样式类名的名字,这样就不会出现很难理解的类名了,具有一定的语义性

module.exports = {
  entry: __dirname + '/index.js',
  output: {
    publicPath: '/',
    filename: './bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['es2015', 'stage-0', 'react']
        }
      },
      {
        test: /\.css$/,
        loader: "style-loader!css-loader?modules&localIdentName=[path][name]---[local]---[hash:base64:5]"
      },
    ]
  }
};

2. 在外层套上自己的类名

套上自己的类名,做到隔离实现css私有化

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>

3. VUE中的私有样式处理

<style scoped>
.example {
 color: red;
}
</style>
<template>
 <div class="example">hi</div>
</template>

编译之后为:

<style>
.example[data-v-5558831a] {
 color: red;
}
</style>
<template>
 <div class="example" data-v-5558831a>hi</div>
</template>

scoped属性做了如下操作:

1. 给HTML的DOM节点加一个不重复属性data-v-469af010标志唯一性
2. 在添加scoped属性的组件的每个样式选择器后添加一个等同与“不重复属性”相同的字段，实现类似于“作用域”的作用，不影响全局
3. 如果组件内部还有组件，只会给最外层的组件里的标签加上唯一属性字段，不影响组件内部引用的组件（ 注意 ）

4 vue中样式穿透

有时需要在scoped标签里,修改第三方组件的样式,如下处理:

<style>
.example >>> element-ui {
 color: red;
}
//或则
.example::v-deep element-ui {
 color: red;
}
</style>