ruby - 如何在 Hyperstack 中导入 Material-Icons？

Question

我尝试使用 MaterialUi 的 <MenuIcon /> (就像这里的 https://material-ui.com/demos/app-bar/ )在我的 Hyperstack-App 中，但我在下面收到错误。

我安装了 @material-ui/icons用 yarn ，然后我在/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 而你问的是 Material UI，所以我会把第一个答案留给任何使用 Semantic 的人，现在回答 Material 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 打包)