我有一个正在运行的应用程序ReactJS。我正在使用CSS-Modules进行内联样式。我有一个svg带有图标的单独文件，我想在我的组件css文件中对其进行样式化。

这是一个图标MyComponent/add.svg：

这是我的MyComponent/MyComponent.css

这是我的MyComponent/MyComponent.jsx中的一段代码

它工作正常。但是当我尝试为svg项目应用样式（例如：填充）时，我遇到了这个问题，它不起作用并且没有任何变化。

您是否应该推荐一种实施这种情况的方法？

感谢您观看这个问题。

我想在我的 react-rails 项目中使用一种稳定且可扩展的方式来实现主题。目前，react 组件有自己的 CSS 文件，并且样式是使用 CSS-modules 管理的……为 react 组件设置不同的 CSS 主题的最佳方式是什么

具体要问

• 对于实现各种主题的 CSS 文件来说，什么是更好的文件组织？
• 如何将这些主题应用于现有的 react 组件，以便我可以将一个主题应用于根节点，并且组件树下的所有 react 组件都将应用主题？

我正在尝试在 webpack 项目中使用 css 容器查询和 css 模块。这个配置看起来像这样：

和这样的 postcss 配置：

我希望能够让这个类工作：

并且能够将“卡片列表”导入我的组件。

但是，这似乎不起作用。我一直无法在网上找到有关此类问题的任何信息。

处理以下场景的模块化方式是什么：应用程序具有所有标题标签（h1、h2、h3 等）的通用样式。一个特定的组件 Widget.jsx 可以使用这些标题中的任何一个，但对 h1 标签有特殊的样式。在 CSS 的“旧”时代，我会通过（可能）单个样式表中的继承来处理这个问题。例如

显然，以上内容不适合 CSS 的模块化方法，但我不确定如何以模块化方式完成上述场景。接下来是我解决问题的初步尝试。

小部件.jsx

_widget.less

原子/文本/_text.less

它一直有效，直到使用通用的、未修改的类之一（.h2）。显然，问题在于这些类.h2没有定义_widget.less并且没有“全局”定义（与模块化 CSS 最佳实践保持一致），但我倾向于认为将其他标题类显式组合到.h2, .h3, .h4 ...类中并不是要么回答。例如

_widget.less

另一个可能的解决方案是@import将一般标题样式放入_widget.less文件中。

_widget.less

该解决方案的问题在于，每次我使用来自可交付代码的样式_text.less并膨胀我的可交付代码时，这些样式都会被复制。

关于如何最好地解决此类问题的任何想法？我对模块化 CSS 的概念很陌生。

核心.scss

WebPack 配置：

错误：

模块构建失败：CssSyntaxError: postcss-modules-local-by-default: src/styles/core.scss:1:0: Missing whitespace before :global :global {

在带有CSS 模块的 React/Webpack 应用程序中，我.card在它自己的 .scss 文件中有一个模块，另一个名为的模块.stat是要在 .scss 文件中显示的内容.card。

我需要实现以下目标，但采用“css-modules”方式：

.card如果我在模块内@import .stat，所有的.cardcss 都会被转储到.stat输出中，但我只想能够为.card.

解决问题的正确方法是什么？

我试图理解为什么我CSS在使用css-modules. 这是我的jsx：

这是CSS：

所以当selectTab为真时，则s.selected应用于元素。在这种情况下，coloris white，但它不适用于元素。color中定义的那个.tab li a是覆盖它的。我必须添加!important以white使其成为color. 我不了解什么css或css-modules？

场景

我试图通过使用自定义属性来区分组件component。例子：

设计这个很容易：

问题

这是棘手的部分。为了确保组件不会产生副作用，它不应该对子组件中的任何内容进行样式设置：

完整示例

这是一个简单的例子。它定义了外部组件的结构和样式。

HTML

CSS

第一种方法

这是第一个幼稚的方法。

它有几个逻辑问题，但我想你明白我想要做什么。

我的感觉是，这对于纯 CSS 是不可能的。但在编写自定义 Javascript 之前，我想问你我是否遗漏了什么或过度思考了问题。

我只是想知道使用这些 cssnext 自定义属性以及反应中的 css 模块的最佳方法是什么。

有没有办法跨模块共享这些？

编辑：***好的，我试过了，认为它有效但没有

我已经使用 ModularCSS 和 webpack 启用了 postCSS：

这意味着我现在可以像这样导入“CSS 模块”：

组件/app.js

这将确保整个应用程序基于引导程序的“全局 css”，例如重置。

此外，在组件中，我可以清楚地定义它们对 Bootstrap 的依赖关系，例如：

组件/control.js

但是，语法className={Bootstrap.btn + ' ' + Bootstrap['btn-primary']}难以阅读且不易使用。

这个问题以前解决过吗？关于如何使其更具可读性和可操作性的任何建议？