Материал UI Темы и Гиперстек - PullRequest
Новая
       31

Материал UI Темы и Гиперстек

0 голосов
/ 07 апреля 2019

Material UI (React) использует игровое решение, в котором объект темы создается в JS, а затем передается в компонент верхнего уровня. Создание объекта темы в Opal может быть сложным, так как компонент Material ожидает передачи функции JS, которая фактически создает тему на лету.

У кого-нибудь есть пример того, как это хорошо работает?

1 Ответ

0 голосов
/ 07 апреля 2019

После некоторых экспериментов, я получил это хорошо, смешав код JS и Opal, так что вот решение, если кто-то еще придумает это. (Может быть лучшее решение «больше опала», поэтому, если есть, пожалуйста, опубликуйте альтернативный ответ, но приведенный ниже работает хорошо.

Сначала импортируйте библиотеки 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
...