How to Use React MUI 5 Box Component

In this tutorial, we will how to use Box Component in react with material ui (mui 5).

Install & Setup Vite + React + Typescript + MUI 5

In Simple word Box Component is a like html <div> tag. You can add any css style using box Component with sx prop. You can style color or Overriding style using box Component.

React Mui 5 Box Component Example

1. react mui 5 Overriding button component using box component & sx prop.

import { Box } from '@mui/system';
import Button from '@mui/material/Button';

export default function BoxComponent() {
  return (
    <Box component="span" sx={{ p: 2, border: '1px dashed grey' }}>
      <Button>Save</Button>
    </Box>
  );
}

react mui 5 box

2. You can use Box component sx with padding, margin, border, height, width, flex, grid, responsive etc...

<Box sx={{ p: 2 }}>padding</Box>
<Box sx={{ m: 2 }}>margin</Box>
<Box sx={{ border: 2 }}>border</Box>
<Box sx={{ bgcolor: "blue" }}>bgcolor</Box>
<Box sx={{ height: 100, width: 100, border: 2 }}>width & height</Box>