Custom new variant throws error but works

[rferreira98]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

#22602
I'm having the exact same issue but with the latest version of MUI and MuiMenu.
Although the styles I'm applying work, the error is thrown.

MuiMenu: { variants: [ { props: { variant: "nestedfilter" }, style: ...

And getting error:

Warning: Failed prop type: Invalid prop "variant" of value "nestedfilter" supplied to "ForwardRef(Menu)", expected one of ["menu","selectedMenu"].

Expected behavior 🤔

Not to throw error.

Steps to reproduce 🕹

Steps:

1. Create new variant in theme.js (createTheme) for MuiMenu
2. Apply prop variant="nestedfilter" to Menu (Menu from @mui/material)
3. Run project
4. Error is thrown

Context 🔦

A custom menu styling.

Your environment 🌎

Using 98.0.4758.102 (Official Build) (arm64)

`npx @mui/envinfo`

  System:
    OS: macOS 12.1
  Binaries:
    Node: 17.3.0 - /usr/local/bin/node
    Yarn: Not Found
    npm: 8.3.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 98.0.4758.109
    Edge: Not Found
    Firefox: Not Found
    Safari: 15.2
  npmPackages:
    @emotion/react: ^11.7.1 => 11.7.1 
    @emotion/styled: ^11.6.0 => 11.6.0 
    @mui/base:  5.0.0-alpha.69 
    @mui/icons-material: ^5.4.1 => 5.4.1 
    @mui/material: ^5.3.1 => 5.4.3 
    @mui/private-theming:  5.4.2 
    @mui/styled-engine:  5.4.2 
    @mui/system:  5.4.3 
    @mui/types:  7.1.2 
    @mui/utils:  5.4.2 
    @types/react:  17.0.38 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    typescript:  4.5.5 

[mnajdova]

The Menu's variant prop affects the behavior of the component, so it is not safe to introduce a new variant value. This is why the error is being shown. We discussed some time ago that we should probably normalize the variant prop to affect only the look of the component, not he behavior, then it would be safe to override it on all components. However, we can do this only in v6 because it would be a breaking change.

In the mean time, we could update the docs to specify in which components it is supported, or we should add a more meaningful warning message, that would explain why it is not supported.

[rferreira98]

The Menu's variant prop affects the behavior of the component, so it is not safe to introduce a new variant value. This is why the error is being shown. We discussed some time ago that we should probably normalize the variant prop to affect only the look of the component, not he behavior, then it would be safe to override it on all components. However, we can do this only in v6 because it would be a breaking change.

In the mean time, we could update the docs to specify in which components it is supported, or we should add a more meaningful warning message, that would explain why it is not supported.

In order to style the component should I just apply some css rules and leave the variant syntax out for now?