@@ -45,7 +45,6 @@ const ScrollBar = React.forwardRef<ScrollBarRef, ScrollBarProps>((props, ref) =>
45
45
const [ dragging , setDragging ] = React . useState ( false ) ;
46
46
const [ pageXY , setPageXY ] = React . useState < number | null > ( null ) ;
47
47
const [ startTop , setStartTop ] = React . useState < number | null > ( null ) ;
48
- const [ dark , setDark ] = React . useState ( false ) ;
49
48
50
49
const isLTR = ! rtl ;
51
50
@@ -188,21 +187,6 @@ const ScrollBar = React.forwardRef<ScrollBarRef, ScrollBarProps>((props, ref) =>
188
187
}
189
188
} , [ dragging ] ) ;
190
189
191
- React . useEffect ( ( ) => {
192
- const media = window . matchMedia ?.( '(prefers-color-scheme: dark)' ) ;
193
- setDark ( media . matches ) ;
194
-
195
- const listener = ( e : MediaQueryListEvent ) => {
196
- setDark ( e . matches ) ;
197
- } ;
198
-
199
- media ?. addEventListener ( 'change' , listener ) ;
200
-
201
- return ( ) => {
202
- media ?. removeEventListener ( 'change' , listener ) ;
203
- } ;
204
- } , [ ] ) ;
205
-
206
190
React . useEffect ( ( ) => {
207
191
delayHidden ( ) ;
208
192
return ( ) => {
@@ -225,45 +209,38 @@ const ScrollBar = React.forwardRef<ScrollBarRef, ScrollBarProps>((props, ref) =>
225
209
226
210
const thumbStyle : React . CSSProperties = {
227
211
position : 'absolute' ,
228
- background : dark ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.5)' ,
229
212
borderRadius : 99 ,
213
+ background : 'var(--rc-virtual-list-scrollbar-bg, rgba(0, 0, 0, 0.5))' ,
230
214
cursor : 'pointer' ,
231
215
userSelect : 'none' ,
232
- ...propsThumbStyle ,
233
216
} ;
234
217
235
218
if ( horizontal ) {
236
- // Container
237
- containerStyle . height = 8 ;
238
- containerStyle . left = 0 ;
239
- containerStyle . right = 0 ;
240
- containerStyle . bottom = 0 ;
241
-
242
- // Thumb
243
- thumbStyle . height = '100%' ;
244
- thumbStyle . width = spinSize ;
245
-
246
- if ( isLTR ) {
247
- thumbStyle . left = top ;
248
- } else {
249
- thumbStyle . right = top ;
250
- }
219
+ Object . assign ( containerStyle , {
220
+ height : 8 ,
221
+ left : 0 ,
222
+ right : 0 ,
223
+ bottom : 0 ,
224
+ } ) ;
225
+
226
+ Object . assign ( thumbStyle , {
227
+ height : '100%' ,
228
+ width : spinSize ,
229
+ [ isLTR ? 'left' : 'right' ] : top ,
230
+ } ) ;
251
231
} else {
252
- // Container
253
- containerStyle . width = 8 ;
254
- containerStyle . top = 0 ;
255
- containerStyle . bottom = 0 ;
256
-
257
- if ( isLTR ) {
258
- containerStyle . right = 0 ;
259
- } else {
260
- containerStyle . left = 0 ;
261
- }
262
-
263
- // Thumb
264
- thumbStyle . width = '100%' ;
265
- thumbStyle . height = spinSize ;
266
- thumbStyle . top = top ;
232
+ Object . assign ( containerStyle , {
233
+ width : 8 ,
234
+ top : 0 ,
235
+ bottom : 0 ,
236
+ [ isLTR ? 'right' : 'left' ] : 0 ,
237
+ } ) ;
238
+
239
+ Object . assign ( thumbStyle , {
240
+ width : '100%' ,
241
+ height : spinSize ,
242
+ top,
243
+ } ) ;
267
244
}
268
245
269
246
return (
@@ -283,7 +260,7 @@ const ScrollBar = React.forwardRef<ScrollBarRef, ScrollBarProps>((props, ref) =>
283
260
className = { classNames ( `${ scrollbarPrefixCls } -thumb` , {
284
261
[ `${ scrollbarPrefixCls } -thumb-moving` ] : dragging ,
285
262
} ) }
286
- style = { { ...thumbStyle } }
263
+ style = { { ...thumbStyle , ... propsThumbStyle } }
287
264
onMouseDown = { onThumbMouseDown }
288
265
/>
289
266
</ div >
0 commit comments