问题标签 [css-modules]

我有一个名为 ColorInput 的可重用组件。

但是，每个输入都有不同的文本颜色。因此，我为每个输入设置了不同的类。例如，红色输入、绿色输入、蓝色输入。

SCSS

颜色输入组件

}

StyleName 没有输出到正确的类。

我知道这可能是一个报告的问题，但是，我不确定我是否有同样的问题。

更新：我计划尽快包含一个现场演示。

我试图弄清楚如何导入/需要全局 css，其中包括诸如 body 等标签的样式。我使用 css-loader + style-loader 和提取文本插件。我注意到 :global 选择器，但不知道我应该把 global.css 放在哪里并导入它。

谢谢

我可以isomorphic-css-loader用来使 css 模块在服务器端渲染上工作。但我确实需要在 react 组件的 html 标签上动态添加内联样式。就像css模块的默认样式，内联样式的更新样式。是否可以同时使用它们？就像 SSR 中的 Radium + css 模块...

这是正常的 css 模块场景：

// 我的组件.scss

// 我的组件.js

我想 ：

尝试使用 react 获取 html 元素的颜色，以传递给我的 redux action/reducer。

JSX

事件处理程序

Console/redux 控制台为所有样式返回空值。

我正在使用 react-css-modules/css-modules，这是我能想到的唯一异常。

任何想法都非常受欢迎，谢谢。

编辑：我专门为这个 stackoverflow 问题创建了一个分支：https ://github.com/CharlieGreenman/pixelLight/tree/stackoverflow-37583025

注意：这个应用程序的数据流是有一个静态值，它填充应用程序的其余部分是动态的。作为对建议的回应，经过深思熟虑，我决定这是构建应用程序的正确方法。

我现在正在学习 CSS 模块，它们看起来可以解决很多问题。但是所有的文档都是基于 CSS 的，我想使用 SASS。

这可能吗？例如，我怎样才能使以下语句起作用？

我正在为一个项目使用https://github.com/mxstbr/react-boilerplate，该项目使用 CSS 模块和 postCSS 作为样式，这很棒。但是，我还需要一些用于排版、基本组件等的全局 CSS 文件。如何添加这些文件的最佳实践是什么？我看过使用preCSS，但不完全确定如何在 webpack 中设置它，以便它可以将这些全局文件导入到主样式表中。我是 webpack 的新手（来自 Gulp/Grunt 背景，使用 Sass）所以这里的任何帮助将不胜感激。

如果我可以在 CSS 模块文件中使用这些文件中定义的变量和 mixin，那也很棒，但不确定这是否可行或建议。我已经安装了react-css-modules以便我可以styleName用来引用 CSS 模块文件和className引用全局 CSS 类。

我知道有该composes: class from '/path/to/file.css';属性，但我希望有一些全局文件，其中定义了各种实用程序类，例如clearfix错误类等。所以使用react-css-modules，它看起来像这样： <div className="clearfix" styleName="app-header">{...}</div>

同样，不确定这是否正确。

在我从事开源项目时，我想坚持最佳实践，并希望以最好的方式完成。感谢您的任何建议！

尝试让装饰器语法适用于 react css 模块，如此处所示。 https://github.com/gajus/react-css-modules#decorator

我有 react-css-modules 使用函数语法工作，例如

CSSModules(Table, styles)

但是当使用装饰器时，例如

@CSSModules(styles)

export default class extends React.Component {}

似乎什么都没有被实例化，也没有抛出任何错误。我已经加载了 babel-plugin-syntax-decorators。

我会错过什么？谢谢！！

CSS 模块与 React 类一起工作就像一个魅力Component，但是，当我尝试在我的pure components（即没有类）中实现它们时，Webpack 无法编译代码：

这是一个简单的组件：

...和风格

这是我development扩展基础的配置（这里不是真的必要）：

我将 webpack 和 React 与 react-css-modules 和 scss 文件一起使用。当我尝试构建它时，每个导入 scss 文件的文件都会出现错误 -

我已经用谷歌搜索了一天半，但没有找到！请帮忙！

这是我的 webpack 设置：

提前致谢！

最近我正在开发一个 ui 框架，该框架允许在同一功能组件上使用不同的 css 样式进行扩展，例如视频播放器。我使用 ReactJS 和 webpack 作为捆绑器，并使用 css 模块。但是，我发现很难为同一个组件添加另一种样式，因为我将 css-loader 与模块一起使用。有没有人对此进行过共同实验？:D