Fix emotion and css-modules specificity (#6632)

packages/harmony/src/foundations/theme/ThemeProvider.tsx

@@ -1,10 +1,19 @@
 import type { ReactNode } from 'react'
 
-import { ThemeProvider as EmotionThemeProvider } from '@emotion/react'
+import createCache from '@emotion/cache'
+import {
+  CacheProvider,
+  ThemeProvider as EmotionThemeProvider
+} from '@emotion/react'
 
 import { themes } from './theme'
 import type { Theme } from './types'
 
+const harmonyCache = createCache({
+  key: 'harmony',
+  prepend: true
+})
+
 type ThemeProviderProps = {
   theme: Theme
   children: ReactNode
@@ -14,8 +23,10 @@ export const ThemeProvider = (props: ThemeProviderProps) => {
   const { children, theme } = props
 
   return (
-    <EmotionThemeProvider theme={themes[theme]}>
-      {children}
-    </EmotionThemeProvider>
+    <CacheProvider value={harmonyCache}>
+      <EmotionThemeProvider theme={themes[theme]}>
+        {children}
+      </EmotionThemeProvider>
+    </CacheProvider>
   )
 }