如何在 Hyperstack 中导入 Material-Icons？

Question

我尝试在我的 Hyperstack-App 中使用 MaterialUi 的 <MenuIcon />（如此处 https://material-ui.com/demos/app-bar/），但出现以下错误。

我用 yarn 安装了 @material-ui/icons，然后像这样在 /app/javascript/packs/application.js 中导入它

import * as Mic from '@material-ui/icons';
global.Mic = Mic;

然后运行 bin/webpack 没有错误。

然后我在组件中有这样的东西：

   Mui.Toolbar() do

        if @menu == 'true'
          Mui.IconButton() do
            Mic.MenuIcon() {}
          end

...

但是我得到一个错误：

Uncaught error: RuntimeError: could not import a react component named: Mic.MenuIcon

我做错了什么？

非常感谢您的帮助:)

Answer 1

我没有将 MenuIcon 视为 class 在语义 UI 中，并且在按钮上使用了这样的图标：

所以，如果您像这样导入 Material UI

Sem = require('semantic-ui-react');

Sem.Button(icon: true, labelPosition: 'left', primary: true) do
    Sem.Icon(name: :heart)
    SPAN { "Add Love" }
end

您可能还需要导入您的图标库（在 NPM 中或简单地通过在您的布局中包含 Material CSS。

我发现导入图标（以及所有语义 CSS）的最佳方法是使用 Yarn 构建，然后像这样通过 Webpack 导入

require('../../../vendor/semantic/dist/semantic.css');

Answer 2

我回答的问题就好像你在使用语义 UI 而你问的是 Material UI，所以我会把第一个答案留给任何使用语义的人，现在回答Material UI.

图标最简单的方法是在布局中导入 Material 图标库 HTML

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

然后像这样在 Material UI 中简单地使用它们：

IconButton { Icon(fontSize: :large) { expand_icon } }

如果您将整个 Material UI 库作为一个对象导入（根据您的问题），那么它将是：

Mic.IconButton { Mic.Icon(fontSize: :large) { 'expand_more' } }

此外，我认为 @material-ui/icons' 不包含任何方法，只包含图标本身，因此您可以只导入它然后使用图标（因为资源将被 Webpack 捆绑)

How to import Material-Icons in Hyperstack?