问题标签 [isomorphic-style-loader]

我可以在没有“同构样式加载器”的情况下很好地渲染组件，但是在使用 withStyles() 导出时出现此警告

“警告：wrapWithStyles(...)：必须返回有效的 React 元素（或 null）。您可能返回了未定义的数组或其他一些无效对象。”

我已经用父“div”封装了组件

使用 isomorphic-style-loader 解决此问题的任何解决方案？ kriasoft/react-starter-kit

使用 react-starter-kit 以及他们在此处提出的解决方案：roylee0704/react-flexbox-grid似乎无法解决问题。

我正在 NodeJS 之上构建一个同构的 react-redux 应用程序。我正在从服务器渲染我的主页。但是，我的样式并没有反映在我的渲染视图中。我想在客户端导入样式表。我尝试了这篇文章和这篇文章，但它们都没有真正让我得到我想要实现的目标。

以下是有关该项目的更多详细信息。

.babelrc

webpack.config.js

服务器.js

contextProvider.js

我将它导入到我的 homePresenter 中

并在我的 div 中使用它与相同的组件

如果我将其更改为

我在浏览器上收到错误

在浏览器上，我可以看到 div 的类名为“组件”；它；只是它没有继承样式。

关于我在这里缺少什么的任何建议？

我正在尝试使用 react-draft-wysiwyg 模块，但没有使用与模块关联的导入样式。我认为这是由于导入的 css 被加载到哈希中，而模块中元素的类属性不是。

既然如此，我可以：

• 将 react-draft-wysiwyg 中的类转换为哈希类名，或者
• 样式加载器是否忽略了 react-draft-wysiwyg css 文件？

我尝试过的一些事情包括：

• import draftcss from 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'; ... export default withStyles(s, draftcss)(Layout);

• 在主要导入的 css 文件中： @import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';

• 从父路由的 index.js 文件中导入 react-draft-wysiwyg.css

使用 React-Redux（通用应用程序）在服务器端渲染上加载 css 的最佳方法是什么

注意：服务器端性能优先。

例如：Isomorphic-style-loader 或 react-style 或任何其他。

我正在使用react-starter-kit并构建一个如下所示的列表组件：

我正在尝试为我的li项目添加一个“活动”类，但不知道如何做到这一点？我尝试使用该classnames库，但不确定如何从我的样式中获取第二类。当我只传入字符串“active”时，不会导入样式。

我的问题是我将如何做类似的事情：

我目前正在尝试在服务器上呈现适用于 HTML 和 JS 的应用程序，但发现我的样式 (.less | .scss) 不会加载。我做了一些研究，并不确定，isomorphic-style-loader我的 Webpack 配置中缺少基于其他人遇到相同问题的配置。我设置了它，至少我是如何理解它的，但现在发现在运行应用程序时我收到以下错误：

TypeError: Cannot read property 'apply' of undefined at WithStyles.componentWillMount

我对整个 React / Express 有点陌生，但我一直在努力学习教程和学习，如果有什么不合适的地方，请原谅。我希望看看是否有人可以解释究竟是什么导致了这个错误，并让我知道我可以遵循什么来解决这个错误。下面是一些类似于我遇到问题的示例代码，如果它有任何帮助的话。

（作为参考，我正在关注 Tyler McGinnis React Router Server Rendering tutorial 并尝试对其进行扩展以添加样式 -链接在这里）

预先感谢您就可能导致此错误的原因提供的任何解释。

webpack.config.babel.js

服务器.js

路由.js

浏览器.js

应用程序.js

关于Main.js

about.scss

嗨，我已经看到了同样的错误和多种可能的解决方案，但没有一个能够解决我的问题（可能是因为我对整个 React 结构缺乏深入的了解）。

我知道 context.insertCss.apply(context, styles); 没有收到上下文，这就是引发错误的原因，我添加了 ContextProvider 但我担心这可能与我的路由设置冲突。还使用了 Daniel 对这个问题的回答 [ Why does isomorphic-style-loader throw a TypeError: Cannot read property 'apply' of undefined when being used with CSS-Modules

服务器 index.js

在服务器上添加了 renderToString(..) 方法中的 ContextProvider，我还替换了 html 正文，以便将接收到的 CSS 附加到 HTML 响应中。

ContextProvider.js

使用了 Daniel 回答中的上下文提供程序（上面的参考资料）

客户端 index.js

按设想通过 ContextProvider 传递上下文。

ContextProvider 内部使用的 App.js

我正在尝试测试自定义样式的 Home.js

routes.js 描述了使用的路由。

几乎可以肯定这个问题有一个简单的解决方案，但对我来说似乎并不那么微不足道。先感谢您。

嘿，我正在做这个简单的react+SSR项目，其中包含isomorphic-style loader. 我按照这里的分步指南来实现它https://www.npmjs.com/package/isomorphic-style-loader但它不起作用。我做的风格没有表现出来。谁能指导我解决这个问题？

这是我的webpack config

这是我的index.js (server)

这是我的index.js (browser)

这是App.js其中使用css styling不起作用的组件。