React CSS 模块，继承自通用 css 模块

Question

我有几个简单的 React 组件，每个组件都在各自的文件夹中使用自己的 React CSS 模块。 CSS 是基本的，但我可以使用它。我正在使用 Webpack 2 进行构建。

我的问题是如何将来自另一个 CSS 模块的 CSS 的公共部分共享到两个 React CSS 模块中？

我不确定我是否应该有一个只包含通用 CSS 模块的文件夹，然后将其导入到两个 React 组件中。如果是这样，我如何 refer/reference 常见 CSS.

我已经阅读了文档，但我仍然感到困惑。

有没有类似于SASS或Less include/composition的方法？

我知道这可能会打破孤立组件的模式，但在我的简单情况下，我有一些 CSS 可以制作一个带有稍微透明边框的按钮，让它通用会很好对所有反应组件。我想我可以把这个 CSS 是一个常见的 .css 文件并让 Webpack 捆绑它，然后将它用作 className={....}

Answer 1

I suppose I could place this CSS is a common .css file and have Webpack bundle it, then just use it as className={....}

你是对的，因为实际上你正在构建一个单页应用程序，这意味着所有内容都将加在一起，之后只有 HTML、CSS 和 javascript .您可以像往常一样声明您的 CSS 样式，然后在您的渲染方法

中设置一些 className 或 id

Answer 2

根据您的设置执行此操作的正确方法是使用 CSS 模块的 composes 功能

这允许您定义本地化 class 规则，并将其导入其他本地化 class 规则，甚至跨文件

MyCommonStyles.css

/* base button styles */
.button {
  background: #000;
  color: #fff;
}

MyModule1.css

/* use base button styles and override the color */
.loginButton {
  composes: button from './MyCommonStyles.css';
  color: #00ff00;
}

I understand this may break the pattern of isolated components

在 CSS 模块领域，跨模块共享代码片段没有错 - 远非如此，这是内置的并且规定一遍又一遍地重新创建相同的样式会适得其反 - 只要因为它不是使用 global CSS

完成的

对于它的价值，可以使用建议的 CSS 自定义属性 @apply 以不同的方式实现相同的目的，您今天可以通过 postcss (https://github.com/postcss/postcss-custom-properties) 使用它。这两种方法都很好，但我鼓励您也尝试组合使用，以创建可以跨 CSS 个模块共享的通用变量或代码片段。这是创建具有标准化主题的组件的好方法，仍然使用纯本地化 CSS

React CSS 模块，继承自通用 css 模块

React CSS modules, inheriting from a common css module

reactjs

react-css-modules