Book Image

React Material-UI Cookbook

By : Adam Boduch
Book Image

React Material-UI Cookbook

By: Adam Boduch

Overview of this book

Material-UI is a component library for rendering UI elements, using modern best practices from React and Material Design. This book will show you how you can create impressive and captivating modern-day web apps by implementing Material Design considerations. The book is designed to help you use a variety of Material-UI components to enhance UI functionality, along with guiding you through React best practices, and using state, context, and other new React 16.8 features. You will start with layout and navigation, exploring the Grid component and understanding how it’s used to build layouts for your Material-UI apps. Using Material-UI components, you’ll then explore the technique of effectively presenting information. In later sections, you will also learn about the different components for user interactions such as the text input component and buttons. Finally, the book will get you up to speed with customizing the look and feel of your app, right from creating a Material-UI theme through to styling icons and text. By the end of this book, you will have developed the skills you need to improve the look and feel of your applications using Material-UI components.
Table of Contents (22 chapters)

Installing more icons

The mdi-material-ui package provides a staggering number of icons, available for you to use in your Material-UI applications in the same way as you would use the built-in icons.

How to do it...

The first step is to install the package and make it available in your project:

npm install --save mdi-material-ui

Now you're ready to import icons from this package and use them:

import React, { Fragment } from 'react';

import { withStyles } from '@material-ui/core/styles';

import Apple from 'mdi-material-ui/Apple';
import Facebook from 'mdi-material-ui/Facebook';
import Google from 'mdi-material-ui/Google';
import Hulu from 'mdi-material-ui/Hulu';
import...