feat: add new page button (#2417)

packages/component/src/ui/menu/menu.tsx

@@ -6,16 +6,27 @@ import { StyledMenuWrapper } from './styles';
 
 export type MenuProps = {
   width?: CSSProperties['width'];
+  menuStyles?: CSSProperties;
 } & PopperProps &
   Omit<TooltipProps, 'title' | 'content' | 'placement'>;
 export const Menu = (props: MenuProps) => {
-  const { width, content, placement = 'bottom-start', children } = props;
+  const {
+    width,
+    menuStyles,
+    content,
+    placement = 'bottom-start',
+    children,
+  } = props;
   return content ? (
     <Popper
       {...props}
       showArrow={false}
       content={
-        <StyledMenuWrapper width={width} placement={placement}>
+        <StyledMenuWrapper
+          width={width}
+          placement={placement}
+          style={menuStyles}
+        >
           {content}
         </StyledMenuWrapper>
       }

packages/component/src/ui/menu/styles.ts

@@ -3,7 +3,10 @@ import type { CSSProperties } from 'react';
 import { displayFlex, styled, textEllipsis } from '../../styles';
 import StyledPopperContainer from '../shared/container';
 
-export const StyledMenuWrapper = styled(StyledPopperContainer)<{
+export const StyledMenuWrapper = styled(StyledPopperContainer, {
+  shouldForwardProp: propName =>
+    !['width', 'height'].includes(propName as string),
+})<{
   width?: CSSProperties['width'];
   height?: CSSProperties['height'];
 }>(({ width, height }) => {