使用 css 模块如何定义全局 class

Question

我正在使用 css 模块，但是我在组件中使用的一个库来附加带有 JavaScript 的推文，在以下结构中向我的组件添加了一些元素：

<div class='user'></div>
<div class='tweet'></div>

我现在想在组件的 css 模块中设置这些元素的样式，如下所示：

MyComponent.css

.user {
 /* styles */
}

.tweet {
 /* styles */
}

当然，由于 webpack 加载程序中的哈希命名，现在我的 .user class 更改为 .MyComponent__user___HZWfM。

如何在我的 css 模块中设置全局样式？

Answer 1

根据css modules docs，:global切换到当前选择器的全局范围。例如 :global(.example-classname)

所以这应该有效：

:global(.tweet) {
    text-align: left;
}
:global(.user) {
    text-align: left;
}

或者定义一个全局块

:global {
    .tweet {
        text-align: left;
    }
    .user {
        text-align: left;
    }   
}

Answer 2

许多人都为此苦苦挣扎，似乎没有任何人同意解决方案。我已经解决的问题涉及对您的捆绑器进行一些调整，并专门解决了按原样导入库的需要，而无需包装它们或手动编辑它们。

在我的 webpack 配置中，我将其设置为扫描所有以 css 结尾的文件，但 'node_modules' 和 'src/static' 文件夹中的文件除外。我从这里导入我的库，它们不会受到类名转换的影响，所以我可以自由地为全局 css 使用常规类名，像往常一样为模块化 css 使用 className={styles.element} 约定（这将编译为 .component_element__1a2b3 或类似的东西）。

这是使用此解决方案的工作生产 webpack 配置示例： http://pastebin.com/w56FeDQA

使用 css 模块如何定义全局 class

Using css modules how do I define a global class

css

reactjs

css-modules