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

如何编写嵌套样式？

1 个答案: