score:0

there is documentation written under the drawer tab.

https://mui.com/api/drawer/

there is another way to do that is to overwrite the original class by inspecting that element, or create an above your drawer, and change the color as a child.

score:0

i forked your example and apply the changes from the question that i suggested you via comments before and here you have your code working with a red background for the drawer.

changes i introduced to make it work were all in the header.js file:

  • added new style named paper to the makestyles invocation at line 17
  • changed const { header, menubutton, toolbar, drawercontainer } = usestyles(); by const { paper, header, menubutton, toolbar, drawercontainer } = usestyles();
  • added classes={{ paper }} to the drawer instance

a few extra things you could improve:

you do not need destructuring when you use a component:

        <drawer
          classes={{ paper }}
          {...{
            anchor: "left",
            open: draweropen,
            onclose: handledrawerclose
          }}
        >
          <div classname={drawercontainer}>{getdrawerchoices()}</div>
        </drawer>

is usually written like this:

        <drawer
          classes={{ paper }}
          anchor="left"
          open={draweropen}
          onclose={handledrawerclose}
        >
          <div classname={drawercontainer}>{getdrawerchoices()}</div>
        </drawer>

instead of:

  return (
    <header>
      <appbar classname={header}>
        {mobileview ? displaymobile() : displaydesktop()}
      </appbar>
    </header>
  );

you should do:

  return (
    <appbar classname={header}>
      {mobileview ? displaymobile() : displaydesktop()}
    </appbar>
  );

Related Query

More Query from same tag