CODEWITHSUNDEEP
reactjsmaterial-ui
Andrei
Andrei

Reputation: 1863

How to style a Drawer using Material-UI v5

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?

Upvotes: 3

Views: 1674

Answers (2)

Chanrithisak Phok - Zen 善
Chanrithisak Phok - Zen 善

Reputation: 2117

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!

Upvotes: 0

Yaya
Yaya

Reputation: 4828

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>
    )
  }

Upvotes: 2

Related Questions