问题标签 [babel-plugin-react-css-modules]

我正在研究一个反应钩子，它将根据传递给组件的道具从 (s)css 模块加载样式。它看起来像这样：

理论上，我希望我们能够像这样编写一个 (S)CSS 模块：

并且能够像这样使用钩子：

这应该做的是根据模式从 css 模块加载样式：

• 对于每个传递的键，看看是否有一个完全匹配的键，然后加载它的样式，这样你就可以直接加载样式
• 对于传递给钩子的每个键/值（prop），加载样式[propName='propValue']

不过，我似乎无法像[columns='1'] {}从 CSS 模块加载定义。

我知道，我可以更改模式，而不是定义道具的样式，因为[propName='propValue'] {}我可以将它们定义为.propName-propValue {}或其他东西，但我想看看是否可以以任何方式使用[propName='propValue'] {}语法。

你有办法做到这一点吗？

我正在尝试在现有的 React 项目中使用 babel-plugin-react-css-modules。大多数组件都可以正常工作，但是将样式“传递”给子组件存在问题。

我有一些这样的父组件：

SearchBlock/index.js

SearcBlock/style.scss

还有像这样的子组件

设置图标/index.js

因此图标在不同的组件中具有适当的样式。

我在生成的 css 文件中得到了什么：

似乎是正确的。但是，子元素呈现如下：

代替

我不能在 settingsIcon 中使用styleName，因为 webpack 在不导入至少一个样式表的情况下会抛出错误。

有没有什么办法解决这一问题？

我的配置

webpack.common.js

babel.config.js

是否有使用 create-next-app (v10+) 配置 babel-plugin-react-css-modules 的简单指南或分步解决方案？

当同时使用 webpack 和 babel 时，需要同时配置两者才能使用 React CSS 模块。例如：

webpack.config.js将需要这样的规则：

babel.config.js将需要这样的插件：

为什么需要在两个地方配置 CSS Modules？两者如何协同工作？即按什么顺序发生什么？

我现在正在学习 React，我遇到了“ React CSS Modules ”的概念。我喜欢 CSS 作用域的想法，我想在我的代码中使用它。我发现babel-plugin-react-css-modules这个插件可以让代码看起来更干净。但是，我在代码中设置它时遇到了一些问题。

这是我的.babelrc文件

我的webpack.config.js：

我的package.json：

如果我这样做npm start，我会收到错误消息：

有关更多详细信息，我有我的代码here。我感谢您的帮助！

BTY，我在这里阅读了可能的解决方案，但没有运气。

我尝试使用 css-modules 设置自己的简单 webpack 配置。问题是我通过 css 类名称中的 css-loader 和 babel css 模块插件获得了不同的哈希值。

我正在使用babel-plugin-react-css-modules并且需要通过 props 将类传递给 React 组件，例如：

在里面CustomComponent，我拿起道具并在需要的地方应用它。

当它不直接传递给styleName时，类名不会被散列。有没有办法通过这个插件实现这一点，即获取散列类名并将其作为道具传递？

我正在使用babel-plugin-react-css-modules，我想生成一个类似（如下）的代码，它styleName在 VS Code 上与 Emmet 一起使用。

我尝试将以下设置添加到其中，settings.json但它不起作用。

有没有办法让这成为可能？

我可以让 styleName 在浏览器中变成类。但是，css/scss 文件不会加载，并且没有样式应用于该类。

scss 文件以*.module.scss. 我试过了，*.scss但 NextJs 抱怨在 _app.js 之外导入全局 CSS。

开发服务器运行没有问题，但浏览器警告“无法加载样式表”。

如果还有其他方法可以将 styleName 与 CSS 模块和 NextJs 一起使用，我也很乐意尝试。我喜欢 CSS 模块，但不喜欢className={style.stylingClass}. 如果可能的话，想坚持使用 CSS 的 kebab-case。可以使用className={style['styling-class']}，但看起来更糟。

.babelrc

next.config.js

包.json

是否有人将 React Router v6 与 CSS 模块（或更准确地说，与babel-plugin-react-css-modules）一起使用？

我不知道如何使用新语法为 NavLink 设置活动类。在 v6 之前，我可以重新映射activeStyleName到activeClassName模块的 Babel 配置中，仅此而已。在 v6 中，当我尝试使用styleNameon NavLink（正确扩展 TS 声明NavLinkProps）时，如下所示：

它失败并出现一些模糊的错误：

有没有人让它工作？我能想到的唯一选择是 CSS 模块的命名导入并通过它引用它，className但它增加了很多冗长，我想避免。

UPD：目前，我正在通过NavLink迁移文档中所述的自定义组件对其进行管理：