javascript - 如何编写嵌套样式？

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 的类。