问题标签 [react-css-modules]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
626 浏览

javascript - 使用带有 sass 的 react-css-modules 不起作用

我试图在使用 sass 时让react-css-modules工作,但就是无法正常工作。我正在关注文档,此时它应该可以正常工作。

scss 包含在 jsx 中

webpack.config.js

当然没有 js 错误,编译后以下内容会输出到我的元素:

但根本没有任何风格。

0 投票
3 回答
15786 浏览

reactjs - JSX 元素类型没有任何构造或调用签名

我使用左边这个简单的 React 元素作为右边页面的根元素。

如何修复显示的错误?

在此处输入图像描述

0 投票
1 回答
697 浏览

javascript - 使用 react-css-modules 时出现大写构造函数名称错误

我已经集成react-css-moduleshttps://github.com/mxstbr/react-boilerplate,并且正在使用它:

但是,JSLint 给了我一个错误:

我该如何解决这个问题?react-css-modules我以与文档所说的相同的方式编写了 JavaScript 。错误似乎不Header应该有大写字母,但从惯例我知道类应该。

作为额外的奖励,如果我可以简单地导出Header而不将其包装在CSSModules(Header, styles);其中会很棒(例如export default Header extends Component {}),但是文档没有提到这一点,所以我不确定它是否可能。

0 投票
1 回答
775 浏览

javascript - React路由器如何基于全局var加载css

我有一个节点项目,它使用以下方法创建一个静态反应 SPA:

  • 反应路由器
  • 还原
  • postcss
  • 反应 CSS 模块

它当前为每个组件加载一个全局 css 文件和模块化 css。在开始时,我会获取一个全局主题变量,即“theme-1”或“theme-2”。我想根据主题 var 的值加载不同的 css 文件,名称相同但目录路径不同,例如:

如果主题是“theme-1”,则导入“ /css/themes/themes1/Component.css ”。否则,如果主题是“theme-2”,则导入“ /css/themes/themes2/Component.css ”。

有什么想法我能做到这一点吗?

请注意,据我所知,模块导入不能包含在 if/else 语句中。

0 投票
1 回答
331 浏览

reactjs - 带有装饰器的 react-css-modules 不起作用

尝试让装饰器语法适用于 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。

我会错过什么?谢谢!!

0 投票
2 回答
5187 浏览

sass - webpack、sass、react-css-modules - ReferenceError 窗口未定义

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

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

这是我的 webpack 设置:

提前致谢!

0 投票
2 回答
885 浏览

reactjs - 将 react-infinite-calendar 与 css-modules 一起使用

我想将react-infinite-calendar组件用于个人项目。它没有拿起CSS。我认为我的 webpack 配置是我使用react-css-modules时的问题。

有人可以告诉我我需要做什么才能让它工作吗?

我的 webpack 配置是:

我的日期选择器组件是:

0 投票
1 回答
1621 浏览

css - React-css-modules: styleName is not recognized

I have a problem with react-css-modules. I am not able to find the classes that I have bound by the styleName. They do not appear as classes in the rendered html.

Here is the code:

And the webpack configuration:

So what is wrong here?

0 投票
0 回答
369 浏览

javascript - Map.prototype.set 在 Internet Explorer 11 中返回未定义

我正在尝试构建一个反应应用程序,并使用 react-css-modules。在 FF 和 Chrome 下一切运行良好,但在 IE11 中我遇到以下问题,在页面加载时我收到以下异常消息:

无法获取未定义或空引用的属性“集”

似乎问题出现在react-css-modules 的generateAppendClassname (第 37 行)中,其中stylesIndexMap将保持未定义。似乎以下操作将为 Map 设置 undefined。

stylesIndexMap = stylesIndex.set(styles, new _simpleMap2.default());

理论上 Map.set 即使在 IE11 下也应该返回地图本身,有人可以帮助理解这个问题吗?

0 投票
0 回答
567 浏览

javascript - React.js 和样式 - 最佳实践

希望这是一个可以帮助人们的问题。

我对 React.js 非常陌生,我仍在思考在我的 React 单页应用程序上使用哪种方法来进行样式设置。

以下是我阅读的一些文档:

内联: https ://facebook.github.io/react/tips/inline-styles.html

关于内联与否的辩论(相当老的帖子): https ://css-tricks.com/the-debate-around-do-we-even-need-css-anymore/

甚至是一些有趣的模块化,比如这个: https ://medium.com/@jviereck/modularise-css-the-react-way-1e817b317b04#.bs7pbqj4j

最后: http ://reactcss.com/

我提倡每个组件都有一个 .scss 文件,您可以(仅)在组件 JS 中导入并在那里使用。从模块化的角度来看,这听起来是最接近的。但是,我不确定这是否是随着时间的推移实现可重用性和可扩展性的最佳方式。

欢迎任何意见和意见。

谢谢!