reactjsmaterial-uidrawer

Adding text to Toggle Menu of a Persistent Drawer in Material UI

I would like to add some text in the area (which I've circled) that has the toggle button for persistent drawers. Is this possible? If so, how would I implement this?

enter image description here

I looked through Stack Overflow and Material UI's documentation and there appears to be no answers to this question of mine.

Solution

  • You can add any text you want in DrawerHeader component like this (in this case "custom header text"):

    <DrawerHeader>
  custom header text
  <IconButton onClick={handleDrawerClose}>
    {theme.direction === "ltr" ? (
      <ChevronLeftIcon />
    ) : (
      <ChevronRightIcon />
    )}
  </IconButton>
</DrawerHeader>

    You can take a look at this StackBlitz for a live working example.