1

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

我的问题是如何将另一个 CSS 模块中的公共 CSS 片段共享到两个 React CSS 模块中？

我不确定我是否应该有一个只有公共 CSS 模块的文件夹，然后将它导入到两个 React 组件中。如果是这样，我如何引用/引用常见的 CSS。

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

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

我知道这可能会破坏孤立组件的模式，但在我的简单案例中，我有一些 CSS 可以制作一个带有略微透明边框的按钮，并且所有反应组件都可以使用它会很好。我想我可以将这个 CSS 放置为一个常见的 .css 文件并让 Webpack 捆绑它，然后将它用作 className={....}

4

2 回答 2

2

给定您的设置，正确的方法是使用composesCSS 模块的功能

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

我的CommonStyles.css

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

我的模块1.css

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

我知道这可能会打破孤立组件的模式

在 CSS 模块领域中，跨模块共享代码片段没有任何问题 - 远非如此，这是内置的，并且反复规定重新创建相同的样式会适得其反 - 只要不使用全局 CSS 完成

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

于 2017-05-15T14:28:05.320 回答
0

我想我可以将这个 CSS 放置为一个常见的 .css 文件并让 Webpack 捆绑它，然后将它用作 className={....}

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

于 2017-05-10T11:16:57.750 回答