问题标签 [react-css-modules]

我正在尝试从外部文件导入和呈现一个对象：React 'element' 类型的属性，并使用 module.exports 将其导入另一个包含组件的文件中，然后在组件内呈现它。该组件之前已被调用 3 次，以创建 3 列并用文本填充它们。

这在导入“文本”时有效，但是我无法让它在导入 React“元素”时工作。

我需要做什么来渲染导入的 React '元素'？我也在使用 css 模块。下面是代码。谢谢：-

我用 dva 初始化了我的项目

我的风格像这样“模块化”了ant-table-small___2ihaB 如何覆盖内置类？

我有一个有两列的表，我想对它们进行样式设置，使第一列的样式设置为text-align:left，第二列设置为text-align:right.

我声明这样的样式：

表格如下所示：

一种详细的方法是为每一列创建一个样式并将它们包含在每个<td>. 有什么方法可以一次选择所有 td（单列）？

我一直在寻找如何组合以下内容：ReactJS + ReactStrap 和 CSS-Modules（react-css-modules 和/或 boostrap-css-modules），但是，我似乎无法将三个模块拼凑在一起来实现所需的效果（或在线查找任何帮助）。

这背后的想法是让 ReactStrap 元素可用，即：

但也允许我使用 CSS-Modules 来获得类似于以下内容的最终结果：

其中 mybutton.css 可能类似于：

我也在使用 Webpack，所以我什至不知道从哪里开始将它与 Webpack 一起使用。

编辑 ：

我使用它的方式如下：

npm install --save bootstrap@4.0.0-alpha.6

npm install --save reactstrap react-addons-transition-group react-addons-css-transition-group react react-dom

npm install --save bootstrap-css-modules

这是我的 webpack 配置

谢谢

React with CSS Module 非常令人愉快，无论如何，我有一个页面我想在其上表示除样式外完全相同的组件，我不知道如何使用 CSS Module 来做到这一点。

以传统方式，我想在每个页面的“head”中使用不同的css文件链接，但是CSS模块通过导入样式绑定在它自己的组件中，似乎没有办法在不破坏其他页面的情况下覆盖它.

当然，我可以将所有组件复制并粘贴到另一个文件夹中，然后将它们导入那里，重新编写css文件，但是完整的组件副本看起来很傻，如果我想修改这些组件中的任何组件怎么办？然后我必须修改所有副本。

有没有优雅的方法来做到这一点？

谢谢你。

我正在一个使用 React 的项目中工作，我们正在使用 SASS 编写样式，然后让 webpack 完成剩下的工作。

我们最近才开始使用 CSS 模块（babel-plugin-react-css-modules准确地说）并且过渡很顺利，除了一件事。

在 CSS 模块之前，我们使用的是 BEM 命名约定。我们经常会在组件的 .scss 文件中做这样的事情：

本质上我们是在利用 SASS 的变量插值能力，以便在block关卡元素的类名很大的情况下少写。

问题是，据我所知，对于这种情况，变量插值不再使用babel-plugin-react-css-modules.

我收到一个错误，例如

我知道使用范围 CSS 规则，真的不需要再写类似的东西.box__list了，因为你可以简单地写.list，因为它的范围是组件，但只是为了好奇，是否可以让 SASS 的变量插值工作babel-plugin-react-css-modules？

我有一个通过babel-plugin-react-css-modules插件使用 CSS 模块的组件。

在组件生命周期的某些时候，我希望能够通过直接访问 DOM 来为其计算新维度。

在我的 SCSS 样式表中，我有一个名为的类.full-width，我想将其应用于组件的 DOM 元素，以便进行计算，然后再次将其删除。

现在，由于添加类并在几分之一秒后删除它不会影响组件或其状态，我想通过直接访问 DOM 来添加和删除类，而不是通过某种方式将其与组件相关联state.

如果我这样做this.DOMReference.classList.add('full-width');，则将类full-width添加到其中，但我想添加该类的模块化版本，因为如果我这样做了styleName="full-width"（例如Component__full-width___Pjd10）

有没有办法在不进行.full-width全局声明的情况下做到这一点？

我能做到这一点react-css-modules吗？

我正在尝试为 webpack 3.5.1 设置babel-plugin-react-css-modules（从 create-react-app 中弹出）。

这是我的 webpack.config.dev.js：

根据演示，我将以下代码添加到我的 webpack 中，但我的 css 不影响组件（我已从 更改className为styleName）。设置它的正确方法是什么（同时允许热重新加载）？

我有一个使用react-css-modules 的组件，我使用mocha和ts-node运行测试，这导致我的测试中断，因为它找不到模块foo.css。我怎么能做到这一点？

我为测试运行的具体命令是：./node_modules/.bin/mocha --compilers ts:ts-node/register,tsx:ts-node/register -r tsconfig-paths/register test/unit/**/*.test.*

我认为我理想的解决方案只是忽略.css导入并返回一个模拟对象，这样styleName我的组件中的道具将保持不变并且断言会很容易，但我愿意接受任何让我运行测试的解决方案。

有没有人尝试将 create-react-app 与 react-css-modules 连接起来？我无法正确配置 webpack。有什么帮助吗？分享 webpack 配置会很有帮助。