Configuración inicial de material componentes web react con gatsbyjs

index.jsx

import React from 'react';
import { Link } from 'gatsby';

/* Material Components */
import { Cell, Grid, Row } from '@material/react-layout-grid';

import Layout from '../components/layout';
import Image from '../components/image';
import SEO from '../components/seo';

const IndexPage = () => (
  <Layout>
    <SEO title="Home" />
    <Grid>
      <Row>
        <Cell
          columns={12}
        >
          <h1>Hi people</h1>
          <p>Welcome to your new Gatsby site.</p>
          <p>Now go build something great.</p>
          <div style={{ maxWidth: '300px', marginBottom: '1.45rem' }}>
            <Image />
          </div>
          <Link to="/page-2/">Go to page 2</Link>
        </Cell>
      </Row>
    </Grid>
  </Layout>
);

export default IndexPage;