[List] Add support for list item container style overrides

docs/src/pages/guides/migration-v4/migration-v4.md

@@ -772,6 +772,25 @@ As the core components use emotion as a styled engine, the props used by emotion
   +<Icon>icon-name</Icon>
   ```
 
+### ListItem
+
+- The overrides for the container slot should be defined under new section in the theme's `components`.
+
+  ```diff
+  const theme = createMuiTheme({
+    components: {
+  -   MuiListItem: {
+  -     styleOverrides: {
+  -       container: { marginTop: '10px' },
+  +   MuiListItemContainer: {
+  +     styleOverrides: {
+  +       root: { marginTop: '10px' },
+        },
+      },
+    },
+  });
+  ```
+
 ### Menu
 
 - The onE\* transition props were removed. Use TransitionProps instead.

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

@@ -157,6 +157,7 @@ declare const ListItem: OverridableComponent<
   >;
 
 export type ListItemClassKey = keyof NonNullable<ListItemProps['classes']>;
+export type ListItemContainerClassKey = 'root';
 
 export type ListItemProps<D extends React.ElementType = 'li', P = {}> = OverrideProps<
   ListItemTypeMap<P, D>,

packages/material-ui/src/ListItem/ListItem.js

@@ -145,13 +145,15 @@ export const ListItemRoot = experimentalStyled(
   }),
 }));
 
+const containerOverridesResolver = (props, styles) => styles.root;
+
 const ListItemContainer = experimentalStyled(
   'li',
   {},
   {
-    name: 'MuiListItem',
-    slot: 'Container',
-    overridesResolver,
+    name: 'MuiListItemContainer',
+    slot: 'Root',
+    overridesResolver: containerOverridesResolver,
   },
 )({
   position: 'relative',
@@ -263,6 +265,7 @@ const ListItem = React.forwardRef(function ListItem(inProps, ref) {
           as={ContainerComponent}
           className={clsx(classes.container, ContainerClassName)}
           ref={handleRef}
+          styleProps={styleProps}
           {...ContainerProps}
         >
           <Root

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

@@ -9,6 +9,7 @@ import {
   fireEvent,
   queries,
 } from 'test/utils';
+import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles';
 import ListItemText from '@material-ui/core/ListItemText';
 import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
 import ListItem, { listItemClasses as classes } from '@material-ui/core/ListItem';
@@ -203,4 +204,35 @@ describe('<ListItem />', () => {
       expect(button).to.have.class(classes.focusVisible);
     });
   });
+
+  it('container overrides should work', function test() {
+    if (/jsdom/.test(window.navigator.userAgent)) {
+      this.skip();
+    }
+
+    const testStyle = {
+      marginTop: '13px',
+    };
+
+    const theme = createMuiTheme({
+      components: {
+        MuiListItemContainer: {
+          styleOverrides: {
+            root: testStyle,
+          },
+        },
+      },
+    });
+
+    const { container } = render(
+      <ThemeProvider theme={theme}>
+        <ListItem>
+          Test<ListItemSecondaryAction>SecondaryAction</ListItemSecondaryAction>
+        </ListItem>
+      </ThemeProvider>,
+    );
+
+    const listItemContainer = container.getElementsByClassName(classes.container)[0];
+    expect(listItemContainer).to.toHaveComputedStyle(testStyle);
+  });
 });

packages/material-ui/src/styles/components.d.ts

@@ -249,6 +249,9 @@ export interface Components {
     defaultProps?: ComponentsProps['MuiListItem'];
     styleOverrides?: ComponentsOverrides['MuiListItem'];
   };
+  MuiListItemContainer?: {
+    styleOverrides?: ComponentsOverrides['MuiListItem'];
+  };
   MuiListItemAvatar?: {
     defaultProps?: ComponentsProps['MuiListItemAvatar'];
     styleOverrides?: ComponentsOverrides['MuiListItemAvatar'];

packages/material-ui/src/styles/overrides.d.ts

@@ -56,7 +56,7 @@ import { LinearProgressClassKey } from '../LinearProgress';
 import { LinkClassKey } from '../Link';
 import { ListClassKey } from '../List';
 import { ListItemAvatarClassKey } from '../ListItemAvatar';
-import { ListItemClassKey } from '../ListItem';
+import { ListItemClassKey, ListItemContainerClassKey } from '../ListItem';
 import { ListItemIconClassKey } from '../ListItemIcon';
 import { ListItemSecondaryActionClassKey } from '../ListItemSecondaryAction';
 import { ListItemTextClassKey } from '../ListItemText';
@@ -174,6 +174,7 @@ export interface ComponentNameToClassKey {
   MuiLink: LinkClassKey;
   MuiList: ListClassKey;
   MuiListItem: ListItemClassKey;
+  MuiListItemContainer: ListItemContainerClassKey;
   MuiListItemAvatar: ListItemAvatarClassKey;
   MuiListItemIcon: ListItemIconClassKey;
   MuiListItemSecondaryAction: ListItemSecondaryActionClassKey;