不能包含 React UI 框架 (Grommet)

Can't include React UI frameworks (Grommet)

我在导入 UI 库时遇到问题,ant design 库有问题所以我决定尝试不同的库,现在我在导入 Grommet 时遇到问题。

我做错了什么?我根据文档添加了依赖项并添加了文档中包含的示例,但仍然无法正常工作。

我正在尝试执行 this code from documentation

但是看起来完全不一样

我和 codesandbox.io、here is link for the code on it

一起工作
import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";
import Heading from "grommet/components/Heading";
import Box from "grommet/components/Box";
import Header from "grommet/components/Header";
import Title from "grommet/components/Title";
import Search from "grommet/components/Search";
import Menu from "grommet/components/Menu";
import Anchor from "grommet/components/Anchor";
import "grommet-css";

class HelloWorldApp extends React.Component {
  render() {
    return (
      <div>
        <Header>
          <Title>Sample Title</Title>
          <Box flex={true} justify="end" direction="row" responsive={false}>
            <Search
              inline={true}
              fill={true}
              size="medium"
              placeHolder="Search"
              dropAlign={{right: "right"}}
            />
            <Menu dropAlign={{right: "right"}}>
              <Anchor href="#" className="active">
                First
              </Anchor>
              <Anchor href="#">Second</Anchor>
              <Anchor href="#">Third</Anchor>
            </Menu>
          </Box>
        </Header>
        <Box>
          <Heading>
            Hello, I'm a Grommet Component styled with
            <a href="https://www.npmjs.com/package/grommet-css">grommet-css</a>
          </Heading>
        </Box>
      </div>
    );
  }
}

var element = document.getElementById("root");
ReactDOM.render(<HelloWorldApp />, element);

所以根据你的代码:

<Menu dropAlign={{right: "right"}}>

缺少图标属性,没有它 菜单组件 直接呈现 锚点
菜单项组件。

为您选择的图标添加导入,即:操作(来自示例)

import Actions from 'grommet/components/icons/base/Actions';

为Menu组件添加图标属性:

<Menu
   icon={<Actions />}
   dropAlign={{ right: 'right' }}
>
  <Anchor href="#" className="active">First</Anchor>
  <Anchor href="#">Second</Anchor>
  <Anchor href="#">Third</Anchor>
</Menu>

这里有一个 codesandbox.io link 可以解决您的问题:
https://codesandbox.io/s/237xo7y48p