Breaking News: Grepper is joining You.com. Read the official announcement!

drawer color mui

Better Bat answered on February 23, 2022 Popularity 9/10 Helpfulness 3/10

answer drawer color mui

drawer color mui

Comment

-1

import React, { useState } from "react";
import { makeStyles } from "@material-ui/core/styles";
import Drawer from "@material-ui/core/Drawer";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";
import Button from "@material-ui/core/Button";

const useStyles = makeStyles({
  list: {
    width: 250
  },
  fullList: {
    width: "auto"
  },
  paper: {
    background: "blue"
  }
});

const DrawerWrapper = () => {
  const classes = useStyles();
  const [isOpen, setIsOpen] = useState();
  const sideList = (
    <div className={classes.list}>
      <List>
        {["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => (
          <ListItem button key={text}>
            <ListItemText primary={text} />
          </ListItem>
        ))}
      </List>
    </div>
  );

  return (
    <>
      <Button onClick={() => setIsOpen(true)}>Open Left</Button>
      <Drawer
        classes={{ paper: classes.paper }}
        open={isOpen}
        onClose={() => setIsOpen(false)}
      >
        <div
          tabIndex={0}
          role="button"
          onClick={() => setIsOpen(true)}
          classes={{ root: classes.root }}
        >
          {sideList}
        </div>
      </Drawer>
    </>
  );
};

export default function App() {
  return (
    <div>
      <DrawerWrapper />
    </div>
  );
}

Popularity 9/10 Helpfulness 3/10 Language whatever

Source: thewebdev.info

Tags: drawer mui whatever

Link to this answer
Share Copy Link

Contributed on Feb 23 2022

Better Bat

0 Answers Avg Quality 2/10

drawer color mui

Contents

More Related Answers

drawer color mui

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.