如何编写嵌套样式？

Question

我正在使用 react.js，我的 webpack 有简单的规则

        {
            test: /\.css$/,
            exclude: /node_modules/,
            use: [
                {loader: 'style-loader'},
                {loader: 'css-loader', options: {modules: true}}
            ]
        }

我所做的一切，我在样式和 css 加载器的帮助下处理我的 css 样式，所以我可以在模块中编写 css，一切正常，但我不明白如何编写嵌套样式，例如我有 jsx 代码这个

import React from 'react';
import ReactDOM from 'react-dom';

import ButtonCSS from "./button.css";
import HeaderCSS from "./header.css";
import ArticleCSS from "./article.css";

const Button = ({title}) => {
    return (
        <div className={ButtonCSS.defaultButtonStyle}>
            {title}
        </div>
    );
};

const Page = () => {
    return (
        <div>
            <header className={HeaderCSS.defaultStyle}>
                <Button title="Search" />
            </header>
            <article className={ArticleCSS.defaultStyle}>
                <Button title="Registration" />
            </article>
        </div>
    );
};

ReactDOM.render(
    <Page />,
    document.querySelector('.container')
);

我希望我的默认项目按钮在搜索时显示为红色，在注册时显示为橙色，但按钮和标题的样式位于不同的 .css 文件中，它们被编译为像这样的随机哈希

<div class="container">
    <div data-reactroot="">
        <header class="_1drImxMAqFTeL1TQCthA-D">
            <div class="_1Itfki2yr_IamWL2zkYKwW">Registration</div>
        </header>
        <article>
            <div class="_1Itfki2yr_IamWL2zkYKwW">Registration</div>
        </article>
    </div>
</div>

所以我不能简单地写一些像

header .magic {
    do something ...
}

如果我开始在所有 .css 文件中使用 :global，那么使用模块有什么意义？

Answer 1

你应该使用组合：https://github.com/css-modules/css-modules#composition。

这样，您的两个类都将扩展一个包含所有通用 css 的类。