Styled Table Cell - Copy this React, Mui Component to your project

import-React,-{-useState,-useRef-}-from-"react";-import-{-Box,-Container,-Typography,-Table,-TableBody,-TableCell,-TableContainer,-TableHead,-TableRow,-Paper,-Checkbox,-TextField,-Grid,-styled,-Button-}-from-"@mui/material";-import-{-FaSignature,-FaPrint-}-from-"react-icons/fa";-const-StyledTableCell-=-styled(TableCell)(({-theme-})-=>-({-backgroundColor:-theme.palette.primary.main,-color:-theme.palette.common.white,-fontSize:-16,-}));-const-StyledTableRow-=-styled(TableRow)(({-theme-})-=>-({-"&:nth-of-type(odd)":-{-backgroundColor:-theme.palette.action.hover,-},-}));-const-PODPage-=-()-=>-{-const-componentRef-=-useRef();-const-[items,-setItems]-=-useState([-{-id:-1,-code:-"ITM001",-name:-"Product-A",-qty:-10,-actual:-9,-rejected:-1,-reason:-"Damaged-in-transit",-checked:-false,-},-{-id:-2,-code:-"ITM002",-name:-"Product-B",-qty:-5,-actual:-5,-rejected:-0,-reason:-"",-checked:-false,-},-{-id:-3,-code:-"ITM003",-name:-"Product-C",-qty:-15,-actual:-12,-rejected:-3,-reason:-"Wrong-specifications",-checked:-false,-},-]);-const-[date,-setDate]-=-useState("");-const-[time,-setTime]-=-useState("");-const-[driverName,-setDriverName]-=-useState("");-const-[vehicleNumber,-setVehicleNumber]-=-useState("");-const-handleCheckboxChange-=-(id)-=>-{-setItems(items.map(item-=>-item.id-===-id-?-{-...item,-checked:-!item.checked-}-:-item-));-};-const-handlePrint-=-()-=>-{-window.print();-};-return-(-<Container-maxWidth="lg"-ref={componentRef}>-<Box-sx={{-display:-"flex",-justifyContent:-"flex-end",-mb:-2-}}>-<Button-variant="contained"-startIcon={<FaPrint-/>}-onClick={handlePrint}-sx={{-"@media-print":-{-display:-"none"-}-}}->-Print-POD-</Button>-</Box>-<Box-sx={{-mb:-4,-mt:-2-}}>-<Grid-container-spacing={2}-alignItems="center">-<Grid-item-xs={12}-md={4}>-<Box-component="img"-src="https://images.unsplash.com/photo-1633409361618-c73427e4e206"-alt="Company-Logo"-sx={{-height:-60,-width:-"auto"-}}-/>-</Grid>-<Grid-item-xs={12}-md={8}>-<Typography-variant="h6">Client-Information</Typography>-<Typography>Order-#:-ORD123456</Typography>-<Typography>Client-Name:-John-Doe-Industries</Typography>-</Grid>-</Grid>-</Box>-<TableContainer-component={Paper}-sx={{-mb:-4-}}>-<Table>-<TableHead>-<TableRow>-<StyledTableCell>Check</StyledTableCell>-<StyledTableCell>Code</StyledTableCell>-<StyledTableCell>Name</StyledTableCell>-<StyledTableCell-align="right">Qty</StyledTableCell>-<StyledTableCell-align="right">Actual</StyledTableCell>-<StyledTableCell-align="right">Rejected</StyledTableCell>-<StyledTableCell>Reason-for-Rejection</StyledTableCell>-</TableRow>-</TableHead>-<TableBody>-{items.map((item)-=>-(-<StyledTableRow-key={item.id}>-<TableCell>-<Checkbox-checked={item.checked}-onChange={()-=>-handleCheckboxChange(item.id)}-/>-</TableCell>-<TableCell>{item.code}</TableCell>-<TableCell>{item.name}</TableCell>-<TableCell-align="right">{item.qty}</TableCell>-<TableCell-align="right">{item.actual}</TableCell>-<TableCell-align="right">{item.rejected}</TableCell>-<TableCell>{item.reason}</TableCell>-</StyledTableRow>-))}-</TableBody>-</Table>-</TableContainer>-<Box-sx={{-mb:-4-}}>-<Grid-container-spacing={3}>-<Grid-item-xs={12}-md={6}>-<Typography-variant="h6"-sx={{-mb:-2-}}>-Date-and-Time-</Typography>-<Grid-container-spacing={2}>-<Grid-item-xs={12}-sm={6}>-<TextField-fullWidth-type="date"-label="Date"-value={date}-onChange={(e)-=>-setDate(e.target.value)}-InputLabelProps={{-shrink:-true-}}-/>-</Grid>-<Grid-item-xs={12}-sm={6}>-<TextField-fullWidth-type="time"-label="Time"-value={time}-onChange={(e)-=>-setTime(e.target.value)}-InputLabelProps={{-shrink:-true-}}-/>-</Grid>-<Grid-item-xs={12}-sm={6}>-<TextField-fullWidth-label="Driver-Name"-value={driverName}-onChange={(e)-=>-setDriverName(e.target.value)}-/>-</Grid>-<Grid-item-xs={12}-sm={6}>-<TextField-fullWidth-label="Vehicle-Number"-value={vehicleNumber}-onChange={(e)-=>-setVehicleNumber(e.target.value)}-/>-</Grid>-</Grid>-</Grid>-<Grid-item-xs={12}-md={6}>-<Typography-variant="h6"-sx={{-mb:-2-}}>-Signature-</Typography>-<Paper-sx={{-p:-3,-height:-150,-display:-"flex",-alignItems:-"center",-justifyContent:-"center",-backgroundColor:-"#f5f5f5"-}}->-<Box-sx={{-textAlign:-"center"-}}>-<FaSignature-size={40}-color="#666"-/>-<Typography-sx={{-mt:-1-}}>Click-to-sign</Typography>-</Box>-</Paper>-</Grid>-</Grid>-</Box>-</Container>-);-};-export-default-PODPage;-Actual,-Rejected,-Reason-for-rejection-must-be-empty-so-that-user-can-input