React Component Library with Material UI

Why Material UI?

Creating a custom component library from scratch can be tedious and time-consuming. Instead, it’s much faster to use one of an existing component libraries well-architected components than to spin up a custom one.
Instead of using Sass or JS in CSS, I prefer using Styled Components for the ability to pass functions and props, write regular CSS, inject custom properties like any other React component and just the overall component-driven nature of it.
Well, the good news is, Material UI pretty much supports it out of the box.

Setting up Material UI

Install Material-UI's source files via npm:

npm install @material-ui/core

Or using yarn:

yarn add @material-ui/core

Material-UI components work without any additional setup, and also don't pollute the global scope.

import styled from "styled-components";
import Button from "@material-ui/core/Button";

const StyledButton = styled(Button)`
  color: white;
  && :hover {
    color: blue;
  }
`;

Pretty simple isn't it?

Using ThemeProvider for avoiding use of && everywhere

If we want to be able to style our Material UI components without using && then we have to do the following:

import { StylesProvider } from '@material-ui/styles';
import Button from "@material-ui/core/Button";

<StylesProvider injectFirst>
  <Button>Hey there!</Button>
</StylesProvider>

All it does is ensure that Material UI’s styles get injected first so that Styled Components classes take priority.

Read more here