How to style a Drawer using Material-UI v5

user_337554 0
Viewed 552

In Material-UI v4, the Drawer component could be styled this way:

<Drawer
  variant="persistent"
  classes={{paper: myClassNameHere}}
>

where myClassNameHere is produced by useStyles, which in turn is produced by makeStyles.

Migrating to v5's styling solution is proving tricky for this component in particular, because the styling needs to be applied to the inner Paper child component instead of to the main Drawer component itself.

Is it even possible to style Drawer at this point using the new solution?

material-ui reactjs
2 Answers

You could pass your styled paper to the Drawer like so

import styled from "styled-components";
const MyPaper = styled.div`
  //Put your styles here.
`;

const MyDrawer = () => {
  return (
    <Drawer
       PaperProps={{ component : MyPaper }}
    >
      // drawer content
    </Drawer>
  )
}

Or you could actually pass an styled div to drawer (since paper itself displays flex, remember to pass flex:1 to fill out the space)

const MyPaper = styled.div`
  flex:1;
`;

 const MyDrawer = () => {
   return (
      <Drawer>
        <MyPaper>
          My Content
        </MyPaper>
      </Drawer>
    )
  }
user_142711100

There are many ways to do custom and inline style to MUI Drawer and one of which to do so is: to add PaperProps and put sx

<Drawer
   PaperProps={{
      sx: {
         backgroundColor: "#05192D", 
         color: "blue",
         fontSize: 50, 
      }
   }}
 >
   ...
</Drawer>

Hope this help, let's me know if your problem still persist!

user_82007910
Related