@@ -13,7 +13,7 @@ function testOnChange() {
13
13
14
14
< Slider track = "inverted" /> ;
15
15
16
- // slotProps and componentsProps as objects
16
+ // slotProps as object
17
17
< Slider
18
18
slotProps = { {
19
19
root : { onMouseDown : ( ) => 'onMouseDown event triggered' } ,
@@ -24,18 +24,9 @@ function testOnChange() {
24
24
thumb : { className : 'thumb' } ,
25
25
valueLabel : { valueLabelDisplay : 'auto' } ,
26
26
} }
27
- componentsProps = { {
28
- root : { onMouseDown : ( ) => 'onMouseDown event triggered' } ,
29
- input : { disabled : true } ,
30
- mark : { onClick : ( ) => 'clicked' } ,
31
- markLabel : { className : 'markLabel' } ,
32
- rail : { className : 'rail' } ,
33
- thumb : { className : 'thumb' } ,
34
- valueLabel : { valueLabelDisplay : 'auto' } ,
35
- } }
36
27
/> ;
37
28
38
- // slotProps and componentsProps as functions
29
+ // slotProps as function
39
30
< Slider
40
31
slotProps = { {
41
32
root : ( { color } : SliderOwnerState ) => ( {
@@ -55,22 +46,4 @@ function testOnChange() {
55
46
className : orientation === 'vertical' ? 'thumb_vertical' : '' ,
56
47
} ) ,
57
48
} }
58
- componentsProps = { {
59
- root : ( { color } : SliderOwnerState ) => ( {
60
- className : color === 'primary' ? 'root_primary' : 'root_secondary' ,
61
- } ) ,
62
- input : ( { size } : SliderOwnerState ) => ( { disabled : size === 'medium' } ) ,
63
- mark : ( { marked } : SliderOwnerState ) => ( {
64
- className : marked ? 'marked' : '' ,
65
- } ) ,
66
- markLabel : ( { max } : SliderOwnerState ) => ( {
67
- className : max === 99 ? 'red' : 'normal' ,
68
- } ) ,
69
- rail : ( { dragging } : SliderOwnerState ) => ( {
70
- className : dragging ? 'rail' : '' ,
71
- } ) ,
72
- thumb : ( { orientation } : SliderOwnerState ) => ( {
73
- className : orientation === 'vertical' ? 'thumb_vertical' : '' ,
74
- } ) ,
75
- } }
76
49
/> ;
0 commit comments