Material UI 主题和 Hyperstack

Question

Material UI (React) 使用主题化解决方案，其中主题对象在 JS 中创建，然后传递到顶级组件。在 Opal 中创建主题对象可能会很复杂，因为 Material 组件需要传入一个 JS 函数，该函数实际上是动态创建主题的。

有没有人有这个运作良好的例子？

Answer 1

经过一些实验后，我通过混合 JS 和 Opal 代码使它运行良好，所以这里是解决方案，以防其他人想到这个。（可能有更好的 'more Opal' 解决方案，所以如果有请做 post 替代答案，但下面的答案确实有效。

首先用webpack导入JS库：

import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import indigo from '@material-ui/core/colors/indigo';
import pink from '@material-ui/core/colors/pink';
import red from '@material-ui/core/colors/red';
global.createMuiTheme = createMuiTheme;
global.MuiThemeProvider = MuiThemeProvider;
global.indigo = indigo;
global.pink = pink;
global.red = red;

将以下内容添加到您的 Javascript 资产中：

// app/assets/javascripts/my_theme.js
const my_theme = createMuiTheme(
  { palette: {
    primary: { main: pink[500] },
    secondary: { main: indigo[500] }
  }
});

然后在您的顶级组件代码中提供主题：

class MyRouter < HyperComponent
  include Hyperstack::Router

  render(DIV) do
    MuiThemeProvider(theme: `my_theme` ) do
      CssBaseline do
        ...
      end
    end
  end
end

Material UI 主题和 Hyperstack

Material UI Themes and Hyperstack

ruby-on-rails

ruby

reactjs

isomorphic

hyperstack