fix: add ScopedCssBaseline to expandable view

lifinance · Sep 29, 2022 · a81c216 · a81c216
1 parent 36c341c
commit a81c216
Showing 1 changed file with 16 additions and 16 deletions.
diff --git a/packages/widget/src/components/SwapRoutes/SwapRoutes.style.ts b/packages/widget/src/components/SwapRoutes/SwapRoutes.style.ts
@@ -1,21 +1,7 @@
-import { Box, Stack as MuiStack } from '@mui/material';
+import { Box, ScopedCssBaseline, Stack as MuiStack } from '@mui/material';
 import { alpha, styled } from '@mui/material/styles';
 import { maxHeight } from '../AppContainer';
 
-export const Stack = styled(MuiStack)(({ theme }) => ({
-  alignItems: 'stretch',
-  display: 'flex',
-  flex: 1,
-  flexWrap: 'nowrap',
-  overflow: 'hidden',
-  borderRight: `solid ${
-    theme.palette.mode === 'light'
-      ? theme.palette.grey[300]
-      : theme.palette.grey[800]
-  }`,
-  width: 'calc(100% - 48px)',
-}));
-
 export const CollapseContainer = styled(Box)(({ theme }) => ({
   height: maxHeight,
 }));
@@ -28,7 +14,7 @@ export const ScrollableContainer = styled(Box)({
   flexDirection: 'column',
 });
 
-export const Container = styled(Box)(({ theme }) => ({
+export const Container = styled(ScopedCssBaseline)(({ theme }) => ({
   backgroundColor: theme.palette.background.default,
   overflow: 'auto',
   width: 436,
@@ -49,3 +35,17 @@ export const Header = styled(Box)(({ theme }) => ({
   top: 0,
   zIndex: 1200,
 }));
+
+export const Stack = styled(MuiStack)(({ theme }) => ({
+  alignItems: 'stretch',
+  display: 'flex',
+  flex: 1,
+  flexWrap: 'nowrap',
+  overflow: 'hidden',
+  borderRight: `solid ${
+    theme.palette.mode === 'light'
+      ? theme.palette.grey[300]
+      : theme.palette.grey[800]
+  }`,
+  width: 'calc(100% - 48px)',
+}));