DEV Community

Cover image for Material UI: React Component Library
Evan Loria
Evan Loria

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

Components can also be imported using destructuring.

import { Button, Dialog, List } from '@mui/material';
Enter fullscreen mode Exit fullscreen mode

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

<Button />
<Dialog />
<List />
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

MUI Buttons
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>
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

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'
    }
   }
  }
 }
});
Enter fullscreen mode Exit fullscreen mode

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 />
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Vertically 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>
Enter fullscreen mode Exit fullscreen mode

Stack row

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

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

nextjs tutorial video

đź“ş Youtube Tutorial Series

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series đź‘€

Watch the Youtube series

đź‘‹ Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay