MatxDivider.jsx
1 import { Box, styled } from "@mui/material"; 2 3 const DividerRoot = styled(Box)(({ theme }) => ({ 4 textAlign: "center", 5 position: "relative", 6 height: 16, 7 "&::after": { 8 left: 0, 9 zIndex: 1, 10 top: "10px", 11 content: '""', 12 width: "100%", 13 height: "1px", 14 position: "absolute", 15 backgroundColor: theme.palette.divider 16 }, 17 "& span": { 18 zIndex: 5, 19 background: "#fff", 20 padding: "4px 6px", 21 position: "relative", 22 color: theme.palette.text.secondary 23 } 24 })); 25 26 export default function MatxDivider({ text, sx }) { 27 return ( 28 <div> 29 <DividerRoot sx={sx}>{text && <span>{text}</span>}</DividerRoot> 30 </div> 31 ); 32 }