グロメットイントロ

グロメットは、モジュラーとモバイルの最初のアプリを構築するためのアクセシビリティの中心に別の反応コンポーネントライブラリです.その定義機能の1つは、既存のプロジェクトだけでなく、コンポーネントをカスタマイズするための強力なツールを統合する能力です.異なるスクリーンディスプレイのためのレイアウトを構築して、設計することは速くグロメットで非常に単純です.

新しいアプリのインストール
アプリケーションを作成した後、' src 'ディレクトリからこれらのファイルを削除します.

src/appCSS

src/appテスト.js

src/indexCSS

src/ロゴSVG

内部のsrc/インデックス.インデックスのインポートを削除します.CSS

import ReactDOM from 'react-dom';
import './index.css';  //Remove
import App from './App';

内部のsrc/app.JSは、ロゴやアプリのインポートを削除します.CSS

import React from 'react';
import logo from './logo.svg'; //Remove
import './App.css'; //Remove

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />  //Remove
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

インストールnpm install grommet grommet-icons styled-components --save次に、グロメットコンポーネントのインポートを追加します.import { Grommet } from 'grommet';通常、一度だけトップレベルノードとしてgrommetを含める必要があります.
メインdivをgrommetに置き換えます.

<div className="App"> // Remove
<Grommet plain> // Add
  <header className="App-header">
    <p>
      Edit <code>src/App.js</code> and save to reload.
    </p>
    <a
      className="App-link"
      href="https://reactjs.org"
      target="_blank"
      rel="noopener noreferrer"
    >
      Learn React
    </a>
  </header>
</Grommet> // Add
</div> // Remove  

今すぐカスタマイズを開始することができます.

既存のアプリケーションのインストール
まず、パッケージをインストールするnpm install grommet styled-components polished --save次に、グロメットコンポーネントのインポートを追加します.import { Grommet } from 'grommet';そして、現在、あなたは上の前の主なdiv例のようにトップレベル・ノードを取り替えます.

用途
grommetの箱を使用するには、まずインポートします.import { Box, Grommet } from 'grommet';AppBarコンポーネントを作成し、ヘッダータグを置き換えます.

const AppBar = (props) => (
  <Box
    tag='header'
    direction='row'
    align='center'
    justify='between'
    background='brand'
    pad={{ left: 'medium', right: 'small', vertical: 'small' }}
    elevation='medium'
    style={{ zIndex: '1' }}
    {...props}
  />
);

const App = () => {
  return (
    <Grommet theme={theme}>
      <AppBar>Hello Grommet!</AppBar>
    </Grommet>
  );
}

テーマオブジェクトで色を変える

const theme = {
  global: {
+   colors: {
+     brand: '#228BE6',
+   },
    font: {
      family: 'Roboto',
      size: '18px',
      height: '20px',
    },
  },
};

グロメットはまた、簡単に光と暗いテーマに自動的に適応コンテキスト認識色を宣言する機能を備えています.たとえば、暗い背景には、逆のテキストテキストの色を使用します.
これは単にグロメットとその機能のいくつかの簡単な概要です.公式にsite , あなたは、視覚化、レイアウト、コントロールの詳細を読むことができます.
参考文献

https://v2.grommet.io/

https://github.com/grommet/grommet-starter-new-app

https://github.com/grommet/grommet-starter-existing-app