react css局部作用域与antd按需加载

React css局部作用域与antd按需加载

• React css局部作用域
• Antd按需加载

React css局部作用域

react样式的作用域，一直是开发中比较头疼的问题，在vue中，可以使用scoped来做私有样式的处理，但是在react，声明的样式大多都是全局的，当然，我们可以使用属性选择器解决这个问题，但是终归有很多的弊端，其实在react脚手架中，有一种css样式私有化的解决方案。react脚手架通过css module，规定了css可以有局部作用域， 关于css module，看阮一峰老师详解.

1. css局部作用域
   定义样式文件的的时候，文件名称：xxx.module.css 来命名
   使用：

// css
.loginBack {
    width: 100%;
    height: 100%;
    background: url('../../assets/images/login-back2.jpg');
    background-size: cover;
    position: relative;
}

import React from 'react'
import style from './style.module.css'
import { context } from './page'

export default function LoginMain() {

    return (
        <div className={style.loginBack}>
            <div className={style.mark}>
                
                <div className={style.wTitle}>
                    <p>{context.wTitleTop}</p>
                    <p>{context.wtitleBotton}</p>
                </div>
            </div>
        </div>
    )
}

结果：

在浏览器编译时会添加一个随机hash值，保证命名不会冲突

Antd按需加载

这里介绍使用react-app-rewired。它的作用是用来帮助你重写react脚手架配置