I have a divider template and I want to customize it by transforming it into a horizontal dashed divider. But I'm not sure how to override it, especially if I even do an sx edit by applying a borderRadius, it doesn't change the divider.
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:
Your responses would indeed help me a lot, especially since I am exploring MUI as of this moment. I am also open to alternatives in terms of Dividers. Thank you very much!