Grommet integration with create-react-app

Question

i'm looking for a way to integrate grommet framework to a react app created with the cli. I want to use react grommet components inside my app but there are some problems with the preprocessor SCSS. Today, I tried to integrate them in a lot of ways, I followed a lot of tutorials but It still doesn't working. Do you know or do you have success to use them together ? Thankss

Answer 1

For Grommet 1.x

If you don't want to add scss to your project, grommet-css is a great alternative. You can install it and import the css into your App.js.

Note that to customize the default theme you have to fork the repo, make changes like including a different default grommet style in index.scss or tweaking grommet scss variables. Then you have to update the name in package.json, run npm build, then run npm publish.

Here is an example using grommet and grommet-css

import React, { Component } from 'react'

import '../../node_modules/grommet-css';
import Heading from 'grommet/components/Heading';
import Box from 'grommet/components/Box';

export default class GrommetExample extends Component {
  render() {
    return (
      <Box>
            <Heading>Hello, I'm a Grommet Component styled with <a href='https://www.npmjs.com/package/grommet-css'>grommet-css</a></Heading>
      </Box>
    )
  }
}