[4.12.3] Badge anchorOriginTopRightRectangular style does not work

[robcaldecott]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

@material-ui/core@4.12.3

When using the Badge anchorOriginTopRightRectangle style override the following console warning is generated:

Warning: Failed prop type: Material-UI: The `anchorOriginTopRightRectangle` class was deprecated. Use `anchorOriginTopRightRectangular` instead.

However, updating the style to use anchorOriginTopRightRectangular does not work and the styles are not applied.

Note that using styled and applying & .MuiBadge-anchorOriginTopRightRectangle works without any console warnings.

Expected Behavior 🤔

In order to clear these warnings I would expect anchorOriginTopRightRectangular to work.

Steps to Reproduce 🕹

The following codesandbox shows the issue along with a workaround using styled and the CSS classname.

https://codesandbox.io/s/misty-breeze-64wyt?file=/src/App.js

Context 🔦

I have upgraded an app and am working through all the new console warnings.

Your Environment 🌎

`npx @material-ui/envinfo`

  System:
    OS: macOS 10.15.7
  Binaries:
    Node: 14.17.0 - ~/.nvm/versions/node/v14.17.0/bin/node
    Yarn: Not Found
    npm: 6.14.13 - ~/.nvm/versions/node/v14.17.0/bin/npm
  Browsers:
    Chrome: 92.0.4515.107
    Edge: Not Found
    Firefox: 89.0.2
    Safari: 14.0.2
  npmPackages:
    @emotion/styled:  10.0.27 
    @material-ui/core: ^4.12.2 => 4.12.2 
    @material-ui/icons: ^4.11.2 => 4.11.2 
    @material-ui/lab: ^4.0.0-alpha.60 => 4.0.0-alpha.60 
    @material-ui/pickers: ^3.3.10 => 3.3.10 
    @material-ui/styles:  4.11.4 
    @material-ui/system:  4.12.1 
    @material-ui/types:  5.1.0 
    @material-ui/utils:  4.11.2 
    @types/react:  17.0.0 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    typescript:  4.3.5 

[eps1lon]

Thanks for the report.

We accidentally forgot to warn of the deprecated overlap value as well. You need to use overlap="rectangular" as well. You either have to accept both deprecation warnings or fix both.

[eps1lon]

Closed in #27573