[Paper] Overriding the Paper component in a Menu doesn't work as in v4

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

when using the following theme overrides:

const theme = createTheme({
  components: {
    MuiMenu: {
      styleOverrides: {
        paper: { borderRadius: 4 }
      }
    },
    MuiPaper: {
      styleOverrides: {
        rounded: { borderRadius: 30 }
      }
    }
  }
})

the paper used for menu shows up with border-radius=30px.

Expected behavior 🤔

I would expect that paper used in the context of a menu item be displayed with border-radius=4px (this worked as expected in MUI 4), because it seems more specific. Unless I’m wrong, in which case I wonder how could I remove the “rounded” class from the paper in a context of a menu using global theme.

Steps to reproduce 🕹

https://codesandbox.io/s/mui-theme-override-bug-66q5r

Context 🔦

This caused most menus of my application looked rounded after v4 -> v5 migration.

Your environment 🌎

Latest available mui/emotion packages - see sandbox

[sthenault]

Hello, any update on this? Thx!

[TheGLander]

I think I’m gonna take this issue.