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 (
      sx={{ width: 240, fontSize: 14, bgcolor: "green" }}
      <Typography>My Own Logo</Typography>

Blocks with styles


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

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

    Control the font size with the Typography component.

    Here's a sandbox