问题标签 [react-css-modules]

When using react-css-modules in a project, I found myself trying to do something that can be simplified to this:

The CSS class some-name is defined in ParentComponent.css and contains rules that will position ChildComponentwithin ParentComponent.

ChildComponent implementation looks like this:

I was expecting to receive the CSS defined in the some-name class in the first element of what's rendered on ChildComponent (the wrapping ), but this is not happening and 'some-class' is just ignored.

I could workaround this issue by adding an extra wrapping and applying styles to it, but I would like to avoid this if possible:

Hopefully I have explained the use case and the issue well enough, so any recommendation on how to do this will be much appreciated.

这是一个导入css的组件...

我的样式表sample.css如下...

但是当我运行网络应用程序时，我收到以下错误...

我按照说明设置 css 模块，所以我的 webpack.config 如下所示...

知道为什么我的 CSS 没有被正确读取吗？我是否需要一些东西来转换代码以便正确识别它？

编辑

我认为节点很重要，我正在使用节点 js 通过服务器渲染上面的组件......

这会干扰css吗？

我正在使用 react-router 和 CSS-modules 和 webpack。这一切都很好，但现在需要能够更改语言。我首先尝试通过仅将状态属性更改为不同的语言来做到这一点，但是当更改它时，当前路由不会重新呈现，因此语言更改只会在下一次路由更改发生时生效，即单击链接。

计划 B：尝试将语言环境添加到路由 / 以便它现在出现在 URL 中，这应该会生效，因为路由更新 -> 重新渲染。但是，我现在在加载我的 CSS 模块时遇到错误。

这是我的路由器设置：

这是我的应用程序中的功能：

我的默认路线是液压，所以我得到了错误：

未捕获的错误：“is-english/hydraulics”CSS 模块未定义。

我想知道它是否是我的 webpack css 模块加载器中的配置：

在hydraulics.jsx中，我像这样导入CSS：

我不明白的是为什么css模块是从“is-english”加载的，“is-”前缀来自哪里？此外，该文件不在英文子文件夹中，它与液压系统.jsx 在同一个文件夹中

或者是否与路线的安排方式有关？

我有 react-css-modules 使用 webpack 在我的应用程序上工作，它使用我提供的 ExtractTextPlugin 生成编译的 .css 文件。一切正常，但我坚持如何让它与业力/茉莉花一起工作？

当在 webpack 上构建时未发生此错误时，我不断收到 CSS Module is undefined 。

这是我的业力配置，唯一的区别是我不使用 ExtractTextPlugin

即因为test: /(((activityFeed|fonts)\.css)|(grids-core\.css)|(grids-responsive\.css))$/我有loader: ['style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]']

我正在为我的 reactjs 项目使用 css 模块。这是我尝试使用全局 css 类的文件：

这是我的styles.css

但它不起作用。我认为我在导入时犯了错误。如何导入全局 css，然后在我的应用程序中使用它？

好吧，我是新手，很抱歉犯了愚蠢的错误。

React-css-modules 在使用独立组件时即时组成类名以限制名称冲突。棒极了。但是，一旦加载了 DOM，并且您需要为动画指定一个类，例如，css-modules 提供的类名部分是随机的。

如何处理这个？

一切似乎都很好，没有错误，但页面上的元素仍然没有样式。

webpack.config.js

布局.js

布局.css

编译的app.css

正如您在图片中看到的那样，已生成类并应用于元素，但在页面上没有显示任何内容。 图片

到目前为止，我一直在使用 Redux "connect" 将组件与状态连接起来，我通过以下方式导出组件：

我现在想使用 react-css-modules，但我必须在每个组件中使用以下导出：

如何导出组件以同时具有这两种功能？

谢谢 ：）

我正在尝试在 webpack 中使用 css 模块，但它不起作用。

我的 webpack 是：

我正在使用 ExtractTextPlugin，我只是添加了参数：

在 css 和 scss 加载程序中。

我的反应组件是：

我的 test.css 是：

但它<nav></nav>没有类渲染。

谁能帮我？

我正在使用 Babel 和 ES6 语法使用 React 编写指示器组件，并为我使用 CSS 模块的组件设置样式。该组件工作正常，但我想提高我的代码质量。

在指示器的每个状态中，点的颜色都会发生变化。

定义样式的 CSS 使用 CSS 模块和 composes 关键字

我对这种方法有两个问题：

• 将所有使用的颜色重新分配给一个类，然后根据条件分配它有点麻烦。有什么我想念的吗？
• 有没有更好的方法来处理 React 中的 state 和 classNames 分配？这是一个简单的例子，但我在其他代码中有一些非常讨厌的条件，我想避免它们。

我一直在研究react-css-modules但到目前为止，我认为我不介意在代码中使用 styles.class。