2

I try to use MaterialUi's <MenuIcon /> (like here https://material-ui.com/demos/app-bar/) in my Hyperstack-App but I get error below.

I installed @material-ui/icons with yarn, then I imported it in /app/javascript/packs/application.js like so

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

then ran bin/webpack without errors.

Then I have something like this in a component:

   Mui.Toolbar() do

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

...

But I get an error: 

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

What am I doing wrong?

Thanks a lot for your help :)

4

2 回答 2

1

我回答的问题就像您在询问 Material UI 时使用的语义 UI 一样，所以我将把第一个答案留给任何使用 Semantic 的人，现在回答 Material UI。

Icons 最简单的方法是在布局 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 捆绑）

于 2019-04-04T06:18:02.657 回答
1

我MenuIcon在语义 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');
于 2019-04-04T06:07:04.303 回答