Remove the need for nested child selectors to workaround emotional (sic) issues (#1646)

apps/photos/src/components/pages/gallery/PreviewCard.tsx

@@ -205,12 +205,16 @@ const Cont = styled('div')<{ disabled: boolean }>`
         pointer-events: none;
     }
 
-    &:hover ${Check} {
-        opacity: 0.5;
-    }
-    &:hover ${HoverOverlay} {
-        opacity: 1;
+    &:hover {
+        input[type='checkbox'] {
+            opacity: 0.5;
+        }
+
+        .preview-card-hover-overlay {
+            opacity: 1;
+        }
     }
+
     border-radius: 4px;
 `;
 
@@ -342,7 +346,10 @@ export default function PreviewCard(props: IProps) {
                 </AvatarOverlay>
             )}
 
-            <HoverOverlay checked={selected} />
+            <HoverOverlay
+                className="preview-card-hover-overlay"
+                checked={selected}
+            />
             <InSelectRangeOverLay
                 $active={isRangeSelectActive && isInsSelectRange}
             />

packages/shared/next/next.config.base.js

@@ -25,22 +25,7 @@ const nextConfig = {
     /* generate a static export when we run `next build` */
     output: 'export',
     compiler: {
-        emotion: {
-            importMap: {
-                '@mui/material': {
-                    styled: {
-                        canonicalImport: ['@emotion/styled', 'default'],
-                        styledBaseImport: ['@mui/material', 'styled'],
-                    },
-                },
-                '@mui/material/styles': {
-                    styled: {
-                        canonicalImport: ['@emotion/styled', 'default'],
-                        styledBaseImport: ['@mui/material/styles', 'styled'],
-                    },
-                },
-            },
-        },
+        emotion: true,
     },
     transpilePackages: [
         '@/utils',