5

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:

Current appearance divider

Goal appearance of divider: Dashed divider 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!

Ralph Henry
  • 122
  • 1
  • 13

1 Answers1

1

you can use borderStyle:'dashed' as a property in sx :

sx={{borderStyle:'dashed'}}

Shiva Rowshan rad
  • 45
  • 7