Material UI: React Component Library

Introduction

Material UI, or MUI, is an open source React component library used for building and designing user interface. MUI allows applications to be built quickly by offering out-of-the-box components. The library allows developers to provide a custom theme for their application, as well as customization options for individual components. This article will show how to create a custom theme, import components for use, and demonstrate the use of the stack component.

Installation

Material UI can be installed using npm or yarn. React and react-dom are peer-dependencies, so you must install these packages as well in order to use MUI.

npm install @mui/material
yarn add @mui/material

Components

Once MUI is installed along with its peer dependencies, the components can be imported and used to build your application. Import the component at the top of the file you want to use it. The below code block shows how to import the Button, Dialog, and List component.

import Button from '@mui/material/Button';
import Dialog from '@mui/material/Dialog';
import List from '@mui/material/Button';

Components can also be imported using destructuring.

import { Button, Dialog, List } from '@mui/material';

Once the component is imported it's available to be used as is.

<Button />
<Dialog />
<List />

Customization

MUI offers properties for each component that can be used for customization. Properties for each component are available on the MUI docs under the Component API tab.
Material UI Docs
Properties are assigned inside of the opening tag of the component. Here's an example of assigning property values when working with the button component.

<Button variant="text" color="black">Button</Button>
<Button variant="contained" size="large">Button</Button>
<Button variant="outlined" disabled>Button</Button>

All components have an sx property available to them, which is used to for system overrides as well as other CSS styles that are not direct properties of a component.

<Button
  variant="contained"
  sx={{ 
  backgroundColor: 'purple',
  width: 200,
  color: 'white',
 }}
>Button
</Button>

Themes

MUI offers the ability for users to create custom themes. This feature enables users to maintain consistency between like components across the application, as well as the ability to create a custom color palette. Import the createTheme function and ThemeProvider component.

import { createTheme,                         
         ThemeProvider                                    
       } from '@mui/material/styles';

The createTheme function accepts an object argument, with the properties equal to the element for the styles to be applied to. Set a variable equal to the invocation of the createTheme component on your custom theme object.

const theme = createTheme({
components: {
 MuiButton: {
  styleOverrides: {
   root: {
    width: 100,
    backgroundColor: 'blue'
    }
   }
  }
 }
});

The components property is used to define which MUI component will be effected by the styles. The styleOverrides property is used to override the styles of components. In this case, we are overriding the styles of Button root components. Once you are happy with the theme you have created, you need to wrap the component you want the theme to apply to in the ThemeProvider tag, and supply the theme variable name to the theme property.

<ThemeProvider theme={theme}>
 <YourComponent /> 
<ThemProvider />

We can also use CSS classes of components to define style overrides. The classes for each component exist on the components API within the MUI docs. We can put a '&.Mui-disabled' (must be in quotes) property on our root property object to define the styles of any disabled Button component.
This is just one way to define styles for components. I recommend looking into the documentation for custom themes on the Material UI docs, as well as the docs on creating custom palettes.
Themes
Palette

Containers

Lastly, MUI offers different containers for grouping components to be displayed on the page. One of those components is Stack, which can be used to group elements vertically or horizontally.

import { Stack } from '@mui/material';
      <Stack spacing={6}>
        <Item>One</Item>
        <Item>Two</Item>
        <Item>Three</Item>
      </Stack>

The spacing property determines how far apart the elements will be from each other. The default direction of the stack is vertical. To stack the elements in a row, set the direction property equal to "row".

import { Stack } from '@mui/material';
      <Stack direction="row" spacing={3}>
        <Item>One</Item>
        <Item>Two</Item>
        <Item>Three</Item>
      </Stack>

For more complex, two-dimensional designs, MUI offers the Grid component. You can read the documentation here.

Conclusion

Material UI emphasizes speed and efficiency in enabling developers to build and customize web applications. Their are many more, ready-to-use, well-documented components and customization options available to developers using Material UI. This article only scratches the surface of what Material UI has to offer.

Sources:
Material UI Documentation
MUI Button
MUI Themes
MUI Stack