import : 
import * as React from 'react';
import Box from '@mui/material/Box';

component : tag
div

<Box sx={{ p: 2, border: '1px dashed  var(--color-gray)'}} >div</Box>
header

<Box component="header" sx={{ p: 2, border: '1px dashed  var(--color-gray)'}} >header</Box>
main

<Box component="main" sx={{ p: 2, border: '1px dashed  var(--color-gray)'}} >main</Box>

<Box component="footer" sx={{ p: 2, border: '1px dashed  var(--color-gray)'}} >footer</Box>
section

<Box component="section" sx={{ p: 2, border: '1px dashed  var(--color-gray)'}} >section</Box>
article

<Box component="article" sx={{ p: 2, border: '1px dashed  var(--color-gray)'}} >article</Box>
address

<Box component="address" sx={{ p: 2, border: '1px dashed  var(--color-gray)'}} >address</Box>

<Box component="aside" sx={{ p: 2, border: '1px dashed  var(--color-gray)'}} >aside</Box>
form

<Box component="form" sx={{ p: 2, border: '1px dashed  var(--color-gray)'}} >form</Box>

<Box component="nav" sx={{ p: 2, border: '1px dashed  var(--color-gray)'}} >nav</Box>
menu
<Box component="menu" sx={{ p: 2, border: '1px dashed  var(--color-gray)'}} >menu</Box>
figure

<Box component="figure" sx={{ p: 2, border: '1px dashed  var(--color-gray)'}} >figure</Box>


<Box component="object" sx={{ p: 2, border: '1px dashed  var(--color-gray)'}} >object</Box>
picture

<Box component="picture" sx={{ p: 2, border: '1px dashed  var(--color-gray)'}} >picture</Box>
search
<Box component="search" sx={{ p: 2, border: '1px dashed  var(--color-gray)'}} >search</Box>
canvas
<Box component="canvas" sx={{ p: 2, border: '1px dashed  var(--color-gray)'}} >canvas</Box>

component : style
border

<Box sx={{ border: '1px dashed  var(--color-gray)'}} >border</Box>
padding

<Box sx={{ p: 2, border: '1px dashed  var(--color-gray)'}} >padding</Box>
margin

<Box sx={{ m: 2, border: '1px dashed  var(--color-gray)'}} >margin</Box>
width: '50%'

<Box sx={{ width: 1/2, p:2, border: '1px dashed  var(--color-gray)'}} >width: '50%'</Box>
width: '200px'

<Box sx={{ width: 200, p:2, border: '1px dashed  var(--color-gray)'}} >width: '200px'</Box>

component : style color
color var css

<Box sx={{ p:2, border: '1px dashed  var(--color-gray)
      bgcolor: 'var(--color-primary)', 
      color: 'var(--color-light)',
'}} >color theme mui</Box>
color theme mui

import {Theme} from '@mui/material/styles';

<Box sx={{ p:2, border: '1px dashed  var(--color-gray)
      bgcolor: (theme: Theme) => theme.palette.primary.main, 
      color: (theme: Theme) => theme.palette.common.white,
'}} >color theme mui</Box>

component : style breakpoints
breakpoints

<Box  sx={{ p:2, border: '1px dashed  var(--color-gray)'
      width: { 
            xs: 300, 
            sm: 400, 
            md: 500, 
            lg: 600, 
            xl: 700, 
            xxl: 800, 
      }
}} >breakpoints </Box>
breakpoints ignore

<Box  sx={{ p:2, border: '1px dashed  var(--color-gray)'
      width: { 
            xs: 300, 
            lg: 600, 
            xxl: 800, 
      }
}} >breakpoints ignore </Box>
breakpoints array

<Box sx={{  p:2, border: '1px dashed  var(--color-gray)',
     width: [200, 400, 500, 600, 700, 800 ] 
}} >breakpoints array</Box>
breakpoints array ignore

<Box sx={{  p:2, border: '1px dashed  var(--color-gray)',
     width: [200, , , 600, , 800 ] 
}} >breakpoints array ignore</Box>