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!

1 Answer 1

2

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

sx={{borderStyle:'dashed'}}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.