React

防止CSS冲突

CSSModule

代码示例：

/* src/css/css04.module.css */

.foo {
    border: 1px solid aqua;
}

/* CSSModule不适用于纯标签选择器 */
.foo h1 {  /* 硬要使用的方法 */
    background: #30363d;
}

:global(.bar) {  /* 不会生成随机后缀（全局影响） */
    background: #1f1e33;
}

// src/test/Test04.jsx

import React, {Component} from 'react';
import style from '../css/css04.module.css'

export default class Test04 extends Component {

    render() {
        return (
            <div className={style.foo + ' foo'}>  {/* foo可作为额外的类名使用（不会影响CSS） */}
                <h1>h1</h1>
                <h2 className={'bar'}>h2</h2>
            </div>
        );
    }
}