如何重写Modal的CSS样式且不影响项目中其他Modal组件

问题原因 #

react-bootstrap的Modal默认通过Portal渲染到页面body节点下，和组件本身的DOM层级脱离；你在CSS中直接写的.modal-backdrop.in、.modal.in .modal-dialog属于全局选择器，会匹配页面上所有符合规则的Modal元素，因此会影响其他页面的Modal样式。

修复步骤 #

• 给Loading组件使用的Modal添加专属自定义类名，区分其他普通Modal。利用Modal组件提供的backdropClassName（自定义遮罩类名）、dialogClassName（自定义弹窗容器类名）属性，给遮罩和弹窗内容都打上专属标记，修改后的组件代码如下：

import React, {Component} from 'react';
import {Modal} from "react-bootstrap";
import ReactLoading from 'react-loading';
import './loading.css'

export default class Loading extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        const {show} = this.props;
        return(
            <div>
                <Modal 
                    show={show}  
                    className="loadingModal"
                    dialogClassName="loading-modal-dialog"
                    backdropClassName="loading-modal-backdrop"
                    keyboard={false}
                >
                    <Modal.Body className="testtest">
                        <ReactLoading className="loading-icon" type={"bubbles"} color={"#2f96a1"} height={120} width={120}  />
                    </Modal.Body>
                </Modal>
            </div>
        )
    }
}

注：原代码中给ReactLoading加固定ID的写法存在问题，组件复用时单页面会出现重复ID，违反HTML规范，这里替换成类名写法。

• 改写CSS文件，所有自定义Modal样式都带上专属类名前缀，仅匹配Loading组件对应的Modal元素，同时修正原CSS中无效的属性写法（原代码混用JSX样式驼峰写法和字符串，缺少display: flex导致弹性布局不生效），修改后的loading.css如下：

/* 仅匹配Loading组件的遮罩层 */
.modal-backdrop.in.loading-modal-backdrop {
    opacity: 0;
    filter: alpha(opacity=0);
}
/* 仅匹配Loading组件的弹窗容器 */
.modal.in.loadingModal .modal-dialog.loading-modal-dialog {
    display: flex;
    justify-content: center;
    margin-top: 9%;
}

.loading-icon{
    display: flex;
    justify-content: center;
    margin: auto;
}

.testtest{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

• （可选方案）如果项目支持CSS Modules，也可以直接将loading.css改为CSS Modules文件（命名为loading.module.css），类名经过编译后会自动生成全局唯一的哈希值，从根本上避免类名冲突，不过针对Modal渲染到body的场景，还是需要配合上述专属类名的写法保证样式匹配正确。

内容的提问来源于stack exchange，提问作者Belaid BOUAOUALTEN