[core] Fix various too wide classes types (#25917)

packages/material-ui-lab/src/LoadingButton/LoadingButton.test.js

@@ -33,6 +33,22 @@ describe('<LoadingButton />', () => {
     expect(screen.getByRole('button')).to.have.property('tabIndex', 0);
   });
 
+  it('can be outlined', () => {
+    expect(() => {
+      render(
+        <LoadingButton
+          data-testid="root"
+          variant="outlined"
+          classes={{ outlined: 'loading-button-outlined' }}
+        />,
+      );
+    }).toErrorDev('The key `outlined` provided to the classes prop is not implemented');
+    const button = screen.getByTestId('root');
+
+    expect(button).to.have.class('MuiButton-outlined');
+    expect(button).not.to.have.class('loading-button-outlined');
+  });
+
   describe('prop: loading', () => {
     it('disables the button', () => {
       render(<LoadingButton loading />);

packages/material-ui/src/AppBar/AppBar.d.ts

@@ -9,7 +9,7 @@ export interface AppBarPropsColorOverrides {}
 
 export interface AppBarTypeMap<P = {}, D extends React.ElementType = 'header'> {
   props: P &
-    DistributiveOmit<PaperProps, 'position' | 'color'> & {
+    DistributiveOmit<PaperProps, 'position' | 'color' | 'classes'> & {
       /**
        * Override or extend the styles applied to the component.
        */

packages/material-ui/src/AppBar/AppBar.test.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createMount, createClientRender, describeConformanceV5 } from 'test/utils';
+import { createMount, createClientRender, describeConformanceV5, screen } from 'test/utils';
 import AppBar, { appBarClasses as classes } from '@material-ui/core/AppBar';
 import Paper from '@material-ui/core/Paper';
 
@@ -44,6 +44,18 @@ describe('<AppBar />', () => {
     expect(appBar).to.have.class(classes.colorSecondary);
   });
 
+  it('should change elevation', () => {
+    render(
+      <AppBar data-testid="root" elevation={5} classes={{ elevation5: 'app-bar-elevation-5' }}>
+        Hello World
+      </AppBar>,
+    );
+
+    const appBar = screen.getByTestId('root');
+    expect(appBar).not.to.have.class(classes.elevation5);
+    expect(appBar).not.to.have.class('app-bar-elevation-5');
+  });
+
   describe('Dialog', () => {
     it('should add a .mui-fixed class', () => {
       const { container } = render(<AppBar position="fixed">Hello World</AppBar>);

packages/material-ui/src/Button/Button.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { OverridableStringUnion } from '@material-ui/types';
+import { DistributiveOmit, OverridableStringUnion } from '@material-ui/types';
 import { SxProps } from '@material-ui/system';
 import { Theme } from '../styles';
 import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase';
@@ -163,7 +163,10 @@ export type ButtonTypeMap<
  * can make extension quite tricky
  */
 export interface ExtendButtonTypeMap<M extends OverridableTypeMap> {
-  props: M['props'] & ButtonTypeMap['props'];
+  props: M['props'] &
+    (M['props'] extends { classes?: Record<string, string> }
+      ? DistributiveOmit<ButtonTypeMap['props'], 'classes'>
+      : ButtonTypeMap['props']);
   defaultComponent: M['defaultComponent'];
 }
 

packages/material-ui/src/Card/Card.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { SxProps } from '@material-ui/system';
+import { DistributiveOmit } from '@material-ui/types';
 import { OverridableComponent, OverrideProps } from '@material-ui/core/OverridableComponent';
 import { Theme } from '..';
 import { PaperProps } from '../Paper';
@@ -8,7 +9,7 @@ export interface CardPropsColorOverrides {}
 
 export interface CardTypeMap<P = {}, D extends React.ElementType = 'div'> {
   props: P &
-    PaperProps & {
+    DistributiveOmit<PaperProps, 'classes'> & {
       /**
        * Override or extend the styles applied to the component.
        */

packages/material-ui/src/Card/Card.test.tsx

@@ -20,8 +20,17 @@ describe('<Card />', () => {
   }));
 
   it('when raised should render Paper with 8dp', () => {
-    const { container } = render(<Card raised />);
+    const { container } = render(
+      <Card
+        raised
+        classes={{
+          // @ts-expect-error unknown class that's also ignored at runtime
+          elevation8: 'card-elevation-8',
+        }}
+      />,
+    );
     expect(container.firstChild).to.have.class('MuiPaper-elevation8');
+    expect(container.firstChild).not.to.have.class('card-elevation-8');
   });
 
   it('should support variant="outlined"', () => {

packages/material-ui/src/Link/Link.d.ts

@@ -7,7 +7,7 @@ import { TypographyProps } from '../Typography';
 
 export interface LinkTypeMap<P = {}, D extends React.ElementType = 'a'> {
   props: P &
-    LinkBaseProps & {
+    DistributiveOmit<LinkBaseProps, 'classes'> & {
       /**
        * The content of the component.
        */

packages/material-ui/src/Link/Link.test.js

@@ -37,11 +37,12 @@ describe('<Link />', () => {
 
   it('should pass props to the <Typography> component', () => {
     const { container } = render(
-      <Link href="/" variant="body2">
+      <Link href="/" variant="body2" classes={{ body2: 'link-body2' }}>
         Test
       </Link>,
     );
     expect(container.firstChild).to.have.class(typographyClasses.body2);
+    expect(container.firstChild).not.to.have.class('link-body2');
   });
 
   describe('event callbacks', () => {

packages/material-ui/src/MenuItem/MenuItem.d.ts

@@ -9,7 +9,7 @@ export type MenuItemClassKey = keyof NonNullable<MenuItemTypeMap['props']['class
 
 export interface MenuItemTypeMap<P = {}, D extends React.ElementType = 'li'> {
   props: P &
-    DistributiveOmit<ListItemTypeMap<P, D>['props'], 'children'> & {
+    DistributiveOmit<ListItemTypeMap<P, D>['props'], 'children' | 'classes'> & {
       /**
        * The content of the component.
        */

packages/material-ui/src/MenuItem/MenuItem.test.js

@@ -161,9 +161,19 @@ describe('<MenuItem />', () => {
 
   describe('prop: ListItemClasses', () => {
     it('should be able to change the style of ListItem', () => {
-      render(<MenuItem ListItemClasses={{ disabled: 'bar' }} disabled />);
+      render(
+        <MenuItem
+          classes={{
+            // @ts-expect-error unknown class that's also ignored at runtime
+            disabled: 'foo',
+          }}
+          ListItemClasses={{ disabled: 'bar' }}
+          disabled
+        />,
+      );
       const menuitem = screen.getByRole('menuitem');
 
+      expect(menuitem).not.to.have.class('foo');
       expect(menuitem).to.have.class('bar');
     });
   });