如何在Hyperstack中导入Material-Icons？

Question

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

我用纱安装了@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

我在语义UI中没有将MenuIcon视为类，而是在按钮上使用了如下图标：

因此，如果您要像这样导入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一样，而您询问的是材料UI，因此我将在这里为使用语义的任何人留下第一个答案，现在为材料UI回答。

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

<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捆绑）< / p>