问题标签 [react-toolbox]

http://react-toolbox.com/ Looks really good, but they have a sass dependency. Is there a way to use react-toolbox in a isomorphic/universal app and render them from the server, or are the sass dependencies somehow declared within the components?

They recommend using a CSS loader in the webpack development build. This leads me to the conclusion that the CSS dependencies are within the React Components. Am I wrong?

我正在尝试使用react-toolbox中的日期选择器。

这是我的 webpack 配置：

我在该resolve部分中有 .scss：

我还将我的 App 组件包装在ToolboxAPP

当我渲染组件时，它是这样的：

从图中可以看出组件没有被样式化，对应的css类名也没有定义。

有人知道我做错了什么吗？

如何正确使用 React-Toolbox 的默认样式？

我想试试这个库，但在尝试配置 scss/css 时浪费了几个小时。我可以导入和渲染 react-toolbox 组件，但它们没有样式。使用public/index.html 中的标签，
Roboto 字体和材料可以正常工作<link>

根据简单的安装步骤，我已经包含了 css-loader、sass-loader 和 babel。

我从https://github.com/react-toolbox/react-toolbox-example复制了示例项目。我删除了额外的样式表，例如几个地方的 style.scss，以减少和减少混乱。我注意到示例项目还包括<link rel="stylesheet" href="react-toolbox.css">（我在安装步骤、文档或自述文件中没有看到）。这<link>是必需的，删除它会取消示例的样式。（边问：如何以及在哪里结束 css 文件构建/获得服务？即使在本地使用 npm 服务后，它也不在目录中。）

因此，我从示例中复制了所有/大部分 index.jsx、package.json 和 webpack.config.js，并添加了该样式表<link>，将文件名与示例和我的配置相匹配。

我正在使用import 'react-toolbox/lib/commons'.

样式链接和导入似乎没有效果。运行时我没有来自 npm/webpack 的错误npm start。类似的 github 问题之一有一条评论，表示惊讶于类似问题没有 webpack 错误。

我也试过 [3]（见评论），虽然我不明白那是做什么的。那张海报暗示它并不理想，而且我在其他地方还没有看到这种模式。

我知道这可能会重复React-toolbox 如何正确包含样式。我的代表太低了，无法在那里发表评论，这个问题目前没有答案。由于相关问题似乎很常见，我希望社区回答会有所帮助。

在各种问题中，听起来它通常只是一个 webpack 配置问题。如果是这样的话，我想知道正确的配置是什么。我怀疑我在某处遗漏了一行左右，或者遗漏了一些关于 React 和 Webpack 的现代前端的简单内容，这些内容可能被大多数人假设或常识；我是这些工具的新手。

我正准备导入一个不同的组件库，但我比较喜欢我读过的关于 React-Toolbox 的内容，它似乎对移动设备友好，我至少想尝试一下。

package.json：（名称、许可证、描述省略）

webpack.config.js：

index.jsx：

我正在尝试引导一个新的 react 应用程序并使用 react-toolbox 库和 webpack。我无法同时加载 react-toolbox 的样式和我自己的应用程序的样式。

我习惯导入 scss 文件的方式是从它们附带的 react 文件/视图/组件中导入，因此它们位于同一个文件夹中。因此，如果我有一个名为 header.js 的反应组件文件，那么在同一目录中就有 header.scss。Header.js 调用import './header.scss'. 在 webpack 中，我之前用来加载 scss 的是：

但是当我包含 react-toolbox 时，这个设置完全排除了 react-toolbox 的样式。我发现了这个问题https://github.com/react-toolbox/react-toolbox/issues/121，mattgi推荐这个 webpack-config：

这解决了 react-toolbox 样式未加载的问题，但是当我尝试在 js 文件中导入自己的scss 文件时，webpack 为 scss 文件抛出此错误：（You may need an appropriate loader to handle this file type.我安装了 sass-loader）。

另外，如果我将 scss 文件包含在同名的同一目录中（some-react-class.js 和 some-react-class.scss），则 SomeReactClass 的包含组件正在导入 some-react-class.js将其作为对象而不是函数导入，这使得它看起来像是在导入 scss 而不是 js。

帮助 ：（

我想更改 $appbar-height 变量的默认值。

我创建 toolbox-theme.scss 文件

但我得到了很多错误：

如果我将我的配置文件更改为$color-primary-dark: $palette-blue-700 !default;它可以正常工作并更改颜色。有什么$unit不同$palette-blue-700？

我的样式 webpack 加载器：

React-toolbox 正在以他自己的方式构建它的样式。所有样式看起来像这样： [链接]

移动设备（或者至少我正在为其构建应用程序的手机）显然不支持这种包含方式。当我在移动设备上检查项目时，我得到的所有东西都没有样式。

在官方 react-toolbox 网站上，它们将所有样式都包含在一个单独的 .css 文件中，一切看起来都不错。我怎样才能以同样的方式构建项目？

我的 webpack.config 的加载器 css 部分如下所示：

我正在尝试更新此处找到的 react-toolbox 的 TypeScript 定义文件

我已经修复了一些编译错误，现在我有：

/myproject/typings/main/definitions/react-toolbox/index.d.ts (1047,8) 中的错误：错误 TS2664：扩充中的模块名称无效，找不到模块“react-toolbox/lib/app_bar”。

与以下代码有关definition file：

我已经使用类型安装了定义文件，我的typings.json文件包括：

我正在使用 npm install 方法，因为在我的 tsconfig.json 中我使用了 exclude 并且没有自动找到它：

tsconfig.json使用“节点”模块解析

我不确定我是否错误地将使用项目配置为能够在 node_modules 中找到文件，或者需要修改 TypeScript 定义文件以符合实现此目的的标准方式。我想以标准方式实现这一点，以便我可以提出拉取请求并对其进行更新。

是否需要所有这些模块声明，或者是否可以简化？

我发现在反应中渲染子组件时遇到了麻烦。我正在使用 React-Toolbox 进行样式设置。

我有以下 json 文件

此文件应在名为 Project 的组件中呈现

我的 Project.jsx 文件如下

由于我似乎不明白的原因，CardActions 组件没有在页面中呈现。我不确定是什么原因。

我正在设置一个带有反应的简单注册表单，并使用 onChange 处理程序来更新状态。onChange 处理程序捕获的事件参数是字符串而不是对象。

因此我无法访问event.target.value或事件event.target 事件只是产生我键入的关键字

这是相关的片段。

我在控制台中的错误

Input 字段是一个 react-toolbox 组件

我是 webpack、node.js 以及基本上是 web 开发的初学者。我正在使用Redux/React/Isomorphic 样板。我正在尝试将React-Toolbox用于所有演示组件，但无法构建/捆绑（npm run dev），因为它会引发错误 - “找不到资产”。请帮我解决这个问题。我在下面给出了所有错误/配置详细信息

运行时出错 - “npm run dev”：

调查.js：

网络包配置：

webpack-isomorphic-tools 配置：