#1803 feat: ✨ add containerStyle to List Component

docs/List.md

@@ -10,6 +10,7 @@ That means that `List` also accepts [`Grid` props](Grid.md) in addition to the p
 | :---------------- | :----------------- | :-------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | autoHeight        | Boolean            |           | Outer `height` of `List` is set to "auto". This property should only be used in conjunction with the `WindowScroller` HOC.                                                                                                                                                                                |
 | className         | String             |           | Optional custom CSS class name to attach to root `List` element.                                                                                                                                                                                                                                          |
+| containerStyle    | Object             |           | Optional custom inline style to attach to inner cell-container element.                                                                                                                                                                                                                                   |
 | estimatedRowSize  | Number             |           | Used to estimate the total height of a `List` before all of its rows have actually been measured. The estimated total height is adjusted as rows are rendered.                                                                                                                                            |
 | height            | Number             |     ✓     | Height constraint for list (determines how many actual rows are rendered)                                                                                                                                                                                                                                 |
 | id                | String             |           | Optional custom id to attach to root `List` element.                                                                                                                                                                                                                                                      |

source/Grid/Grid.js

@@ -1065,7 +1065,6 @@ class Grid extends React.PureComponent<Props, State> {
               maxHeight: totalRowsHeight,
               overflow: 'hidden',
               pointerEvents: isScrolling ? 'none' : '',
-              position: 'relative',
               ...containerStyle,
             }}>
             {childrenToDisplay}

source/List/List.jest.js

@@ -346,6 +346,15 @@ describe('List', () => {
       const cell = rendered.querySelector('.listItem');
       expect(cell.style.width).toEqual('100%');
     });
+
+    it('should use a custom :containerStyle if specified', () => {
+      const containerStyle = {backgroundColor: 'red'};
+      const rendered = findDOMNode(render(getMarkup({containerStyle})));
+      expect(
+        rendered.querySelector('.ReactVirtualized__Grid__innerScrollContainer')
+          .style.backgroundColor,
+      ).toEqual('red');
+    });
   });
 
   describe('overscanRowCount', () => {

source/List/List.js

@@ -94,6 +94,9 @@ type Props = {
 
   /** Width of list */
   width: number,
+
+  /** Optional inline style applied to inner cell-container */
+  containerStyle: Object,
 };
 
 export default class List extends React.PureComponent<Props> {
@@ -108,6 +111,7 @@ export default class List extends React.PureComponent<Props> {
     scrollToAlignment: 'auto',
     scrollToIndex: -1,
     style: {},
+    containerStyle: {},
   };
 
   Grid: ?React.ElementRef<typeof Grid>;
@@ -187,7 +191,13 @@ export default class List extends React.PureComponent<Props> {
   }
 
   render() {
-    const {className, noRowsRenderer, scrollToIndex, width} = this.props;
+    const {
+      className,
+      noRowsRenderer,
+      scrollToIndex,
+      width,
+      containerStyle,
+    } = this.props;
 
     const classNames = clsx('ReactVirtualized__List', className);
 
@@ -199,6 +209,7 @@ export default class List extends React.PureComponent<Props> {
         className={classNames}
         columnWidth={width}
         columnCount={1}
+        containerStyle={containerStyle}
         noContentRenderer={noRowsRenderer}
         onScroll={this._onScroll}
         onSectionRendered={this._onSectionRendered}