feat: support scrollbar style (#235)

* feat: support scrollbar style

* docs: update md

* test: add case

Author: linxianxi

README.md

@@ -51,15 +51,16 @@ import List from 'rc-virtual-list';
 
 ## List
 
-| Prop       | Description                                             | Type                                 | Default |
-| ---------- | ------------------------------------------------------- | ------------------------------------ | ------- |
-| children   | Render props of item                                    | (item, index, props) => ReactElement | -       |
-| component  | Customize List dom element                              | string \| Component                  | div     |
-| data       | Data list                                               | Array                                | -       |
-| disabled   | Disable scroll check. Usually used on animation control | boolean                              | false   |
-| height     | List height                                             | number                               | -       |
-| itemHeight | Item minium height                                      | number                               | -       |
-| itemKey    | Match key with item                                     | string                               | -       |
+| Prop       | Description                                             | Type                                                                                                                                                                                  | Default |
+| ---------- | ------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
+| children   | Render props of item                                    | (item, index, props) => ReactElement                                                                                                                                                  | -       |
+| component  | Customize List dom element                              | string \| Component                                                                                                                                                                   | div     |
+| data       | Data list                                               | Array                                                                                                                                                                                 | -       |
+| disabled   | Disable scroll check. Usually used on animation control | boolean                                                                                                                                                                               | false   |
+| height     | List height                                             | number                                                                                                                                                                                | -       |
+| itemHeight | Item minium height                                      | number                                                                                                                                                                                | -       |
+| itemKey    | Match key with item                                     | string                                                                                                                                                                                | -       |
+| styles     | style                                                   | { horizontalScrollBar?: React.CSSProperties; horizontalScrollBarThumb?: React.CSSProperties; verticalScrollBar?: React.CSSProperties; verticalScrollBarThumb?: React.CSSProperties; } | -       |
 
 `children` provides additional `props` argument to support IE 11 scroll shaking.
 It will set `style` to `visibility: hidden` when measuring. You can ignore this if no requirement on IE.

src/List.tsx

@@ -64,6 +64,13 @@ export interface ListProps<T> extends Omit<React.HTMLAttributes<any>, 'children'
    */
   scrollWidth?: number;
 
+  styles?: {
+    horizontalScrollBar?: React.CSSProperties;
+    horizontalScrollBarThumb?: React.CSSProperties;
+    verticalScrollBar?: React.CSSProperties;
+    verticalScrollBarThumb?: React.CSSProperties;
+  };
+
   onScroll?: React.UIEventHandler<HTMLElement>;
 
   /**
@@ -102,6 +109,7 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
     onVisibleChange,
     innerProps,
     extraRender,
+    styles,
     ...restProps
   } = props;
 
@@ -560,6 +568,8 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
           onStopMove={onScrollbarStopMove}
           spinSize={verticalScrollBarSpinSize}
           containerSize={size.height}
+          style={styles?.verticalScrollBar}
+          thumbStyle={styles?.verticalScrollBarThumb}
         />
       )}
 
@@ -576,6 +586,8 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
           spinSize={horizontalScrollBarSpinSize}
           containerSize={size.width}
           horizontal
+          style={styles?.horizontalScrollBar}
+          thumbStyle={styles?.horizontalScrollBarThumb}
         />
       )}
     </div>

src/ScrollBar.tsx

@@ -13,7 +13,8 @@ export interface ScrollBarProps {
   onStartMove: () => void;
   onStopMove: () => void;
   horizontal?: boolean;
-
+  style?: React.CSSProperties;
+  thumbStyle?: React.CSSProperties;
   spinSize: number;
   containerSize: number;
 }
@@ -42,6 +43,8 @@ const ScrollBar = React.forwardRef<ScrollBarRef, ScrollBarProps>((props, ref) =>
     horizontal,
     spinSize,
     containerSize,
+    style,
+    thumbStyle: propsThumbStyle,
   } = props;
 
   const [dragging, setDragging] = React.useState(false);
@@ -204,6 +207,7 @@ const ScrollBar = React.forwardRef<ScrollBarRef, ScrollBarProps>((props, ref) =>
   const containerStyle: React.CSSProperties = {
     position: 'absolute',
     visibility: visible && canScroll ? null : 'hidden',
+    ...style,
   };
 
   const thumbStyle: React.CSSProperties = {
@@ -212,6 +216,7 @@ const ScrollBar = React.forwardRef<ScrollBarRef, ScrollBarProps>((props, ref) =>
     borderRadius: 99,
     cursor: 'pointer',
     userSelect: 'none',
+    ...propsThumbStyle,
   };
 
   if (horizontal) {

tests/scroll.test.js

@@ -401,4 +401,39 @@ describe('List.Scroll', () => {
 
     expect(extraRender).toHaveBeenCalledWith(expect.objectContaining({ end: 99 }));
   });
+
+  it('scrollbar styles should work', () => {
+    const { container } = genList(
+      {
+        itemHeight: 20,
+        height: 100,
+        data: genData(100),
+        scrollWidth: 1000,
+        styles: {
+          horizontalScrollBar: { background: 'red' },
+          horizontalScrollBarThumb: { background: 'green' },
+          verticalScrollBar: { background: 'orange' },
+          verticalScrollBarThumb: { background: 'blue' },
+        },
+      },
+      render,
+    );
+
+    expect(
+      container.querySelector('.rc-virtual-list-scrollbar-horizontal').style.background,
+    ).toEqual('red');
+    expect(
+      container.querySelector(
+        '.rc-virtual-list-scrollbar-horizontal .rc-virtual-list-scrollbar-thumb',
+      ).style.background,
+    ).toEqual('green');
+    expect(container.querySelector('.rc-virtual-list-scrollbar-vertical').style.background).toEqual(
+      'orange',
+    );
+    expect(
+      container.querySelector(
+        '.rc-virtual-list-scrollbar-vertical .rc-virtual-list-scrollbar-thumb',
+      ).style.background,
+    ).toEqual('blue');
+  });
 });