Не могу включить каркас React UI (Grommet) - PullRequest
Новая
       33

Не могу включить каркас React UI (Grommet)

0 голосов
/ 06 октября 2018

У меня проблемы с импортом библиотек пользовательского интерфейса, у меня были проблемы с библиотекой ant design, поэтому я решил попробовать другую, теперь у меня проблемы с импортом Grommet.

Что я делаю не так?Я добавил зависимости в соответствии с документацией и добавил примеры, включенные в документацию, но все еще не работает.

Я пытаюсь выполнить этот код из документации

Но это не выглядиту всех одинаково

Я работаю с codesandbox.io, вот ссылка на код на нем 

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);

1 Ответ

0 голосов
/ 06 октября 2018

Таким образом, в соответствии с вашим кодом: 

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

отсутствовал атрибут значка, без которого компонент Меню *1005* напрямую отображает Якорь ,компонент menu-items.

добавить импорт для значка по вашему выбору, то есть: Действия (из примера) 

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 , которая решает вашу проблему:https://codesandbox.io/s/237xo7y48p

...