Блог

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

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

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

Сначала импортируйте библиотеки JS с помощью webpack:

 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