CSS Modules

什么是 CSS Modules

CSS Modules 是一种 CSS 文件的模块化解决方案。它的主要思想是将 CSS 文件作为一个模块，通过模块化的方式来管理 CSS 文件，避免全局污染，同时还能够实现 CSS 文件的复用。

基本用法

只需将 CSS 文件的后缀名改为 .module.css 即可使用 CSS Modules。

CSSModuleDemo.module.css

button {
    padding: 10px 30px;
    font-size: 18px;
    color: #ffffff;
    /* 文字颜色 */
    background: linear-gradient(45deg, #6a11cb 0%, #2575fc 100%);
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
}

button:hover {
    background: linear-gradient(45deg, #2575fc 0%, #6a11cb 100%);
    color: #e2e2e2;
    /* 悬停时的文字颜色变浅 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

CSSModuleDemo.tsx

import './CSSModuleDemo.module.css';

export default function CSSModuleDemo() {
    return (
        <>
            <button>click</button>
        </>
    );
}