I'm looking to customize a divider template by turning it into a horizontal dashed divider, but I'm struggling to override it. Even when attempting an sx edit with a borderRadius, the divider doesn't change as expected.
source code:
import * as React from "react";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import ListItemText from "@mui/material/ListItemText";
import Divider from "@mui/material/Divider";
const style = {
width: "100%",
maxWidth: 360,
bgcolor: "background.paper"
};
export default function ListDividers() {
return (
<List sx={style} component="nav" aria-label="mailbox folders">
<ListItem button>
<ListItemText primary="Inbox" />
</ListItem>
<Divider sx={{ borderRadius: 1 }} />
<ListItem button divider>
<ListItemText primary="Drafts" />
</ListItem>
<ListItem button>
<ListItemText primary="Trash" />
</ListItem>
<Divider sx={{ borderRadius: 1 }} />
<ListItem button>
<ListItemText primary="Spam" />
</ListItem>
</List>
);
}
Current appearance:
https://i.sstatic.net/RXrQb.png
Goal appearance of divider: https://i.sstatic.net/HlZCi.png
Your input and suggestions would be greatly appreciated as I dive into exploring MUI at this time. I'm also open to alternative approaches for dividers. Thank you for your help!