[List] Add support for list item container style overrides

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

@@ -151,7 +151,7 @@ const ListItemContainer = experimentalStyled(
   {
     name: 'MuiListItem',
     slot: 'Container',
-    overridesResolver,
+    overridesResolver: (props, styles) => styles.container,
   },
 )({
   position: 'relative',
@@ -263,13 +263,13 @@ const ListItem = React.forwardRef(function ListItem(inProps, ref) {
           as={ContainerComponent}
           className={clsx(classes.container, ContainerClassName)}
           ref={handleRef}
+          styleProps={styleProps}
           {...ContainerProps}
         >
           <Root
             {...rootProps}
-            as={Component}
-            styleProps={styleProps}
             {...(!isHostComponent(Root) && {
+              as: Component,
               styleProps: { ...styleProps, ...rootProps.styleProps },
             })}
             {...componentProps}

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: {
+        MuiListItem: {
+          styleOverrides: {
+            container: 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);
+  });
 });