Material UI: A Guide to Build Modern and Responsive Web Applications

If you are looking to build modern and responsive web applications, Material UI is an excellent choice.

What is Material UI (MUI)?

Material UI is a popular open source React UI library that provides a large number of pre-built components and styles, Material UI components are built according to Google’s Material Design concepts.

If you get familiar with Material UI, you can build a responsive web application with an attractive user interface in no time.

Why Material UI?

There are numerous advantages of using Material UI. Some of them are,

1. Consistency: Material UI provides many pre-built components which are attractive and built according to UI principles to enhance user experience. Which can be used to enhance the consistent look of the web application.
2. Customization: The pre-built components can be directly used, or it could be customized according to the developer’s desire. Material UI provides various customization options like theming, styled components and override styles. These options can be used to enhance the uniqueness of the built web application.
3. Wide Range of Components: Material UI provide a wide range of pre-built components such as buttons, input fields, grids, tables, form, cards etc. Which makes the developers work less time consuming and easy.
4. Large Active Community: Material UI consist of a large active community of developers, which means that there are many resources available to learn and explore Material UI.

Getting Started with Material UI

First of all, we need to setup our React app. After that we have some steps to follow.

1. Install Material UI: We can install Material UI packages in the React app using the following command.

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

2. Import Material UI: After installing the Material UI packages, we have to import the components we are about to use. Here’s an example of importing Button component in Material UI.

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

3. Call the Component: Once we have successfully imported the component, we can now use the component inside of our React app.

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

const App = () => {
  return (
      <>
        <Button variant="contained" color="primary">
          Contained Button
        </Button>

        <Button variant="outlined" color="primary">
          Outlined Button
        </Button>
    </>
  );
}

The above buttons are created with just few lines of code. Now I think that you’ll understand why Material UI is ideal to create modern web applications. We just created attractive buttons with minimum effort.

We can also customize accordingly and improve the uniqueness of the web application. As mentioned earlier we can use theming, styled components and override styles to customization.

Theming

Material UI provides theming to customize the color palette and typography of the web application. We can use createTheme() to create a custom theme and send it to ThemeProvider component to apply it to all the components.

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

const theme = createTheme({
  palette: {
    primary: {
      main: '#9400D3',
    },

    secondary: {
      main: '#FFA500',
    },
  },
});

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <Button variant="contained" color="primary">
         Primary Button
      </Button>

      <Button variant="contained" color="secondary">
         Secondary Button
      </Button>
    </ThemeProvider>
  );
}

Styled Components

Material UI provides styled() utility to style any existing components and create a new component.

import React from 'react'
import { Button, styled } from '@mui/material'

const App = () => {

  const StyledButton = styled(Button)({
      height: 200px,
      width: 200px,
  })

  return (
      <StyledButton variant="contained" color="primary">
         Styled Button
      </StyledButton>
  );
}

Override Styles

Material UI provides a sx prop to override component styles, it is similar to in-line CSS. This can be used to override the default style.

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

const App = () => {
  return (
      <>
        <Button variant="contained" color="primary" sx={{
              backgroundColor: '#000000',
              color: '#FF0000'
          }}>
          Overrided Button
        </Button>
    </>
  );
}

Responsive Grid

Material UI provide a Grid component which can be used to increase the responsiveness of the web application. xs sm md lg xl props represents the ratio of the grid according to the display size of the device. Following shows the probs and their breakpoints.

• xs extra-small: 0px
• sm small: 600px
• md medium: 900px
• lg large: 1200px
• xl extra-large: 1536px

The value inside the probs represents the ratio of the screen, the highest number is 12. If xs={12} only that grid item will be displayed in the row when the screen size is extra-small. If there are two components with xs={6} then both will be displayed in one row when the screen size is extra-small. An example is given below.

import React from 'react'
import Grid from '@mui/material/Grid';
import Button from '@mui/material/Button';

const App = () => {
  return (
    <Grid container spacing={2}>
        <Grid item xs={6} md={3}>
            <Button fullWidth variant='contained'>1</Button>
        </Grid>
      
        <Grid item xs={6} md={3}>
            <Button fullWidth variant='contained'>2</Button>
        </Grid>
      
        <Grid item xs={6} md={3}>
            <Button fullWidth variant='contained'>3</Button>
        </Grid>
      
        <Grid item xs={6} md={3}>
            <Button fullWidth variant='contained'>4</Button>
        </Grid>
      
        <Grid item xs={12} md={6}>
            <Button fullWidth variant='contained'>5</Button>
        </Grid>
      
        <Grid item xs={12} md={6}>
            <Button fullWidth variant='contained'>6</Button>
        </Grid>
     </Grid>
   );
}

When the screen size is larger than md (900px)

When the screen size is less than md (900px)

Conclusion

Material UI is an excellent choice for building modern and responsive web applications. We can use existing components, customized components and grids to build a modern and responsive web application. Material UI will be a great choice for experts as well as beginners. Material UI also has an easy to understand documentation which can be used to identify the available components and their props. Click the link below to learn more about Material UI.

Material UI Documentation