@@ -35,6 +35,35 @@ const DrawerWrapper = styled.div`
3535 pointer-events: auto;
3636` ;
3737
38+ const ButtonStyle = styled ( Button ) < { $closePosition ?:string } > `
39+ position: absolute;
40+ ${ ( props ) => props . $closePosition === "right" ?"right: 0;" :"left: 0;" }
41+ top: 0;
42+ z-index: 10;
43+ font-weight: 700;
44+ box-shadow: none;
45+ color: rgba(0, 0, 0, 0.45);
46+ height: 54px;
47+ width: 54px;
48+
49+ svg {
50+ width: 16px;
51+ height: 16px;
52+ }
53+
54+ &,
55+ :hover,
56+ :focus {
57+ background-color: transparent;
58+ border: none;
59+ }
60+
61+ :hover,
62+ :focus {
63+ color: rgba(0, 0, 0, 0.75);
64+ }
65+ ` ;
66+
3867// If it is a number, use the px unit by default
3968function transToPxSize ( size :string | number ) {
4069return isNumeric ( size ) ?size + "px" :( size as string ) ;
@@ -103,34 +132,6 @@ let TmpDrawerComp = (function () {
103132} ,
104133[ dispatch , isTopBom ]
105134) ;
106- const ButtonStyle = styled ( Button ) `
107- position: absolute;
108- ${ props . closePosition === "right" ?"right: 0;" :"left: 0;" }
109- top: 0;
110- z-index: 10;
111- font-weight: 700;
112- box-shadow: none;
113- color: rgba(0, 0, 0, 0.45);
114- height: 54px;
115- width: 54px;
116-
117- svg {
118- width: 16px;
119- height: 16px;
120- }
121-
122- &,
123- :hover,
124- :focus {
125- background-color: transparent;
126- border: none;
127- }
128-
129- :hover,
130- :focus {
131- color: rgba(0, 0, 0, 0.75);
132- }
133- ` ;
134135return (
135136< BackgroundColorContext . Provider value = { props . style . background } >
136137< DrawerWrapper >
@@ -168,6 +169,7 @@ let TmpDrawerComp = (function () {
168169mask = { props . showMask }
169170>
170171< ButtonStyle
172+ $closePosition = { props . closePosition }
171173onClick = { ( ) => {
172174props . visible . onChange ( false ) ;
173175} }