The library is called Material-UI, now known as MUI.

Material-UI is a popular React UI framework that implements Google’s Material Design. It offers a rich selection of pre-built components that you can use to create beautiful and consistent user interfaces. Some of these components include buttons, cards, dialogs, menus, and so much more.

Installation

First things first, let’s get it installed in your project. Open your terminal and navigate to your project’s directory. Use the following command to add Material-UI to your project:

npm install @mui/material @emotion/react @emotion/styled

Using MUI Components

Once you’ve installed it, you can start using Material-UI components in your application. Let’s take a look at how you can use the Button component as an example.

First, import the Button component from MUI at the top of your file like so:

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

Next, you can use the Button component in your JSX like any other component.

<Button variant="contained">Hello World</Button>

The variant="contained" prop gives the button a solid background. You can also use “outlined” for a button with an outline, or “text” for a text button.

Theming

Material-UI provides a powerful theming capability. This means you can define a theme with your own colors, typography, and spacing, and MUI components will automatically apply these styles.

To create a custom theme, you’ll use the createTheme function from MUI and the ThemeProvider component to apply the theme to your components.

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

const theme = createTheme({
  palette: {
    primary: {
      main: '#ff4400',
    },
  },
});

function ThemedApp() {
  return (
    <ThemeProvider theme={theme}>
      <Button variant="contained" color="primary">
        Hello World
      </Button>
    </ThemeProvider>
  );
}

In this example, we’ve created a theme where the primary color is orange. When we use the color="primary" prop on the Button, it uses the primary color from our theme.

Wrap Up

This is just the tip of the iceberg of what you can do with Material-UI. It’s a powerful library that can help you to build your UI faster and maintain a consistent style across your app. In addition to the components and theming, it also provides utilities for handling responsive layouts, accessibility, and even advanced components like data tables and auto-complete text fields.

I highly recommend exploring the official Material-UI documentation to see what else you can do. The documentation includes detailed API references for each component, as well as interactive examples to help you understand how to use them.

Happy Coding!!