fix: Optimize the custom-dropdown demo style (#39626)

* fix: Optimize the custom-dropdown demo style * chore: Using the token variable
ant-design · Dec 19, 2022 · 1ce7d3a · 1ce7d3a
1 parent 254e0a9
commit 1ce7d3a
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 39 deletions.
diff --git a/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -3126,12 +3126,15 @@ Array [
       style="opacity:0"
     >
       <div
-        class="dropdown-content"
+        style="background-color:#ffffff;border-radius:8px;box-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08),
+      0 3px 6px -4px rgba(0, 0, 0, 0.12),
+      0 9px 28px 8px rgba(0, 0, 0, 0.05)"
       >
         <ul
           class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
           data-menu-list="true"
           role="menu"
+          style="box-shadow:none"
           tabindex="0"
         >
           <li

diff --git a/components/dropdown/demo/custom-dropdown.md b/components/dropdown/demo/custom-dropdown.md
@@ -5,20 +5,3 @@
 ## en-US
 
 Customize the dropdown menu via `dropdownRender`. If you don't need the Menu content, use the Popover component directly.
-
-```css
-.dropdown-content {
-  background: #fff;
-  box-shadow: 0 3px 6px -4px rgb(0 0 0 / 12%), 0 6px 16px 0 rgb(0 0 0 / 8%),
-    0 9px 28px 8px rgb(0 0 0 / 5%);
-}
-.dropdown-content .ant-dropdown-menu {
-  box-shadow: none;
-}
-```
-
-<style>
-[data-theme="dark"] .head-example {
-  background: #1f1f1f;
-}
-</style>
diff --git a/components/dropdown/demo/custom-dropdown.tsx b/components/dropdown/demo/custom-dropdown.tsx
@@ -1,7 +1,9 @@
 import React from 'react';
 import { DownOutlined } from '@ant-design/icons';
+import { Dropdown, Space, Divider, Button, theme } from 'antd';
 import type { MenuProps } from 'antd';
-import { Dropdown, Space, Divider, Button } from 'antd';
+
+const { useToken } = theme;
 
 const items: MenuProps['items'] = [
   {
@@ -32,26 +34,40 @@ const items: MenuProps['items'] = [
   },
 ];
 
-const App: React.FC = () => (
-  <Dropdown
-    menu={{ items }}
-    dropdownRender={(menu) => (
-      <div className="dropdown-content">
-        {menu}
-        <Divider style={{ margin: 0 }} />
-        <Space style={{ padding: 8 }}>
-          <Button type="primary">Click me!</Button>
+const App: React.FC = () => {
+  const { token } = useToken();
+
+  const contentStyle = {
+    backgroundColor: token.colorBgElevated,
+    borderRadius: token.borderRadiusLG,
+    boxShadow: token.boxShadowSecondary,
+  };
+
+  const menuStyle = {
+    boxShadow: 'none',
+  };
+
+  return (
+    <Dropdown
+      menu={{ items }}
+      dropdownRender={(menu) => (
+        <div style={contentStyle}>
+          {React.cloneElement(menu as React.ReactElement, { style: menuStyle })}
+          <Divider style={{ margin: 0 }} />
+          <Space style={{ padding: 8 }}>
+            <Button type="primary">Click me!</Button>
+          </Space>
+        </div>
+      )}
+    >
+      <a onClick={(e) => e.preventDefault()}>
+        <Space>
+          Hover me
+          <DownOutlined />
         </Space>
-      </div>
-    )}
-  >
-    <a onClick={(e) => e.preventDefault()}>
-      <Space>
-        Hover me
-        <DownOutlined />
-      </Space>
-    </a>
-  </Dropdown>
-);
+      </a>
+    </Dropdown>
+  );
+};
 
 export default App;