将 'material-ui' 与 react-rails gem 一起使用？

Question

我想在我的 Rails 4 应用程序中使用 material-ui 组件库。我目前正在使用 react-rails gem 将 .jsx 编译添加到资产管道。我在 gem 文件中通过 rails-assets 添加了 material-ui，如下所示：

source 'https://rails-assets.org' do
  gem 'rails-assets-material-ui'
end

并且我在我的 application.js 文件中要求uired 库，如下所示：

//= require material-ui

但是我一直收到错误 "couldn't find file 'material-ui"。如何在我的 Rails 应用程序中使用 material-ui 组件库和 react-rails gem?

Answer 1

好的，这就是我目前所做的工作...

我添加到gem文件中：

gem 'react-rails'
gem "browserify-rails"

这为我们提供了我们的反应库、帮助程序和 jsx 编译，以及使用 require() sytax 到我们 JS 中的 require 模块的能力。 browserify-rails 还允许我们通过 package.json 文件在您的 Rails 资产中请求 uire npm 模块。

我们可以通过此 package.json 文件将 material-ui 库添加到我们的应用中...

"dependencies" : {
    "browserify": "~> 10.2.4",
    "browserify-incremental": "^3.0.1",
    "material-ui": "0.13.1"
  },

material ui 库使用 require 语法以正确的顺序将所有不同的 jsx 组件文件连接在一起，所以这就是为什么我们需要使用 browserify- rails.

接下来为了将我们的反应代码放在一起，我在 asset/javascripts 中创建了一个名为 /react...

的新目录

react
    L /components
    L react.js
    L react-libraries.js
    L theme.js

现在，作为 'material-ui' 依赖项的一部分，我们有了 React 库。这意味着目前我们有两个库副本。一份来自 'react-rails' gem，一份来自 'browserify-rails' 的 'material-ui' 库依赖项。让我们使用 'material-ui' 依赖项中的一个，并保留 'react-rails'.

中的那个

在react.js中：

//= require ./react-libraries
//= require react_ujs
//= require_tree ./components

然后在react-libraries.js

//React Library
React = require('react');
//Material Design Library
MaterialUi = require('material-ui/lib');
injectTapEventPlugin = require('react-tap-event-plugin'); injectTapEventPlugin();
//Material Design Library Custom Theme
MyRawTheme = require('./theme');
ThemeManager = require('material-ui/lib/styles/theme-manager');

然后我们想将所有这些都包含在资产管道中......

//= require react/react

在 application.js.

现在您可以在 /react/components/ 中的 jsx 文件中编写组件您可能还想为您的组件命名空间...

//Custom Components Namespace
Components = {};

在反应中-libraries.js

您可以像这样在 theme.js 中自定义您的主题...

Colors = require('material-ui/lib/styles/colors');
ColorManipulator = require('material-ui/lib/utils/color-manipulator');
Spacing = require('material-ui/lib/styles/spacing');

module.exports = {
  spacing: Spacing,
  fontFamily: 'Roboto, sans-serif',
  palette: {
    primary1Color: Colors.grey300,
    primary2Color: Colors.grey300,
    primary3Color: Colors.lightBlack,
    accent1Color: '#01A9F4',
    accent2Color: Colors.grey100,
    accent3Color: Colors.grey500,
    textColor: Colors.darkBlack,
    alternateTextColor: Colors.white,
    canvasColor: Colors.white,
    borderColor: Colors.grey300,
    disabledColor: ColorManipulator.fade(Colors.darkBlack, 0.3)
  }
};

希望对您有所帮助:)

将 'material-ui' 与 react-rails gem 一起使用？

Using 'material-ui' with react-rails gem?

ruby-on-rails

asset-pipeline

reactjs

react-jsx

react-rails