Material UI Customization is the Best way to style your React JS App . MUI customization made easy.

Material-UI: A popular React UI framework (material-ui.com)
version 4.11.1
Updated as on: Dec 25, 2020

Photo by russn_fckr on Unsplash

Primary agenda of this story is to cover Theming with Material UI.

At the end of this story, you should have a React JS application with all the colors, typography (fonts), spacing, breakpoints, and other styling options set as default through out the website/application.

✓1. create-react-app
✓2. add material-ui
✓3. add material-icons
✓4. add font
✓5. blend and create your custom Style-Guide based Theme
✓6. integrate the Theme to your React app
✓7. BONUS: codesandbox with themeSwitch example.
VOILA! 😀

Now that we are aware of the above sequence, lets rush through the steps and concentrate on creating the custom MUI-Theme

Follow the below steps:

1. $ npx create-react-app myapp
   $ cd myapp
   $ npm start
2. $ npm install @material-ui/core
3. $ npm install @material-ui/icons
4. $ npm install fontsource-roboto
   You can choose to install any font of your choice.
   Material design guidelines may help you choose fonts.
   Also Google Fonts…