Search code examples
reactjsmaterial-ui

The sx styling for Drawer element does not work

I have an elementary component. With sx I try to add styles, but they are not added to the Drawer, but to its parent block and because of this the styles are not applied. What am I doing wrong? Thanks.

import React from "react";
import Typography from "@mui/material/Typography";
import Drawer from "@mui/material/Drawer";

export const Menu= () => {
  return (
    <Drawer
      variant="permanent"
      sx={{ width: 240, fontSize: 14, bgcolor: "green" }}
    >
      <Typography>My Own Logo</Typography>
    </Drawer>
  );
};

Blocks with styles

Solution

  • You need to step into the root css of the drawer:

    <Drawer
  variant="permanent"
  sx={{ "& .MuiDrawer-paper": { width: 240, backgroundColor: "green" } }}
>
  <Typography fontSize={22}>My Own Logo</Typography>
</Drawer>

    Control the font size with the Typography component.

    Here's a sandbox