make reach menu look good with global styles (codesandbox#3592)

Author: siddharthkp

packages/components/src/components/Menu/index.tsx

@@ -1,64 +1,74 @@
 import React from 'react';
 import deepmerge from 'deepmerge';
+import css from '@styled-system/css';
 import * as ReachMenu from '@reach/menu-button';
+import { createGlobalStyle } from 'styled-components';
 import { Element } from '../Element';
 import { Button } from '../Button';
 import { List } from '../List';
 
-const Menu = ({ ...props }) => (
-  <Element as={ReachMenu.Menu} {...props}>
-    {props.children}
-  </Element>
-);
+const Menu = ({ ...props }) => {
+  const PortalStyles = createGlobalStyle(
+    css({
+      '[data-reach-menu]': {
+        zIndex: 2,
+      },
+      '[data-reach-menu-list][data-component=MenuList]': {
+        minWidth: 100,
+        backgroundColor: 'menuList.background',
+        borderRadius: 3,
+        boxShadow: 2,
+        overflow: 'hidden',
+        border: '1px solid',
+        borderColor: 'menuList.border',
+        ':focus': { outline: 'none' },
+        // override reach ui styles
+        padding: 0,
+      },
+      '[data-reach-menu-item][data-component=MenuItem]': {
+        fontSize: 2,
+        paddingY: 2,
+        paddingX: 3,
+        cursor: 'pointer',
+        outline: 'none',
+        color: 'menuList.foreground',
+        '&[data-selected]': {
+          outline: 'none',
+          backgroundColor: 'menuList.hoverBackground',
+        },
+        // override reach ui styles
+        font: 'ineherit',
+      },
+    })
+  );
 
-const MenuButton = ({ css = {}, ...props }) => (
+  return (
+    <Element as={ReachMenu.Menu} data-component="Menu" {...props}>
+      <PortalStyles />
+      {props.children}
+    </Element>
+  );
+};
+
+const MenuButton = props => (
   <Button
-    // @ts-ignore
     as={ReachMenu.MenuButton}
     variant="link"
-    css={deepmerge(css, { width: 'auto' })}
     {...props}
+    css={deepmerge({ width: 'auto' }, props.css || {})}
   >
     {props.children}
   </Button>
 );
 
 const MenuList = props => (
-  <List
-    as={ReachMenu.MenuList}
-    css={{
-      minWidth: 100,
-      backgroundColor: 'menuList.background',
-      borderRadius: 3,
-      boxShadow: 2,
-      overflow: 'hidden',
-      border: '1px solid',
-      borderColor: 'menuList.border',
-      ':focus': { outline: 'none' },
-    }}
-    {...props}
-  >
+  <List as={ReachMenu.MenuList} data-component="MenuList" {...props}>
     {props.children}
   </List>
 );
 
 const MenuItem = props => (
-  <Element
-    as={ReachMenu.MenuItem}
-    css={{
-      fontSize: 2,
-      paddingY: 2,
-      paddingX: 3,
-      cursor: 'pointer',
-      outline: 'none',
-      color: 'menuList.foreground',
-      '&[data-selected]': {
-        outline: 'none',
-        backgroundColor: 'menuList.hoverBackground',
-      },
-    }}
-    {...props}
-  />
+  <Element as={ReachMenu.MenuItem} data-component="MenuItem" {...props} />
 );
 
 Menu.Button = MenuButton;

packages/components/src/index.ts

@@ -24,6 +24,7 @@ export * from './components/FormField';
 export * from './components/Tags';
 export * from './components/Tags/Tag';
 export * from './components/TagInput';
+export * from './components/Menu';
 
 // layout
 export * from './components/Grid';