demo: collapse custom demo supports dark mode (#40144)

* demo: collapse custom demo supports dark mode

* chore: remove className

* demo: update collapse custom

components/collapse/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -589,10 +589,12 @@ exports[`renders ./components/collapse/demo/collapsible.tsx extend context corre
 
 exports[`renders ./components/collapse/demo/custom.tsx extend context correctly 1`] = `
 <div
-  class="ant-collapse ant-collapse-icon-position-start ant-collapse-borderless site-collapse-custom-collapse"
+  class="ant-collapse ant-collapse-icon-position-start ant-collapse-borderless"
+  style="background:#ffffff"
 >
   <div
-    class="ant-collapse-item ant-collapse-item-active site-collapse-custom-panel"
+    class="ant-collapse-item ant-collapse-item-active"
+    style="margin-bottom:24px;background:rgba(0, 0, 0, 0.02);border-radius:8px;border:none"
   >
     <div
       aria-disabled="false"
@@ -646,7 +648,8 @@ exports[`renders ./components/collapse/demo/custom.tsx extend context correctly
     </div>
   </div>
   <div
-    class="ant-collapse-item site-collapse-custom-panel"
+    class="ant-collapse-item"
+    style="margin-bottom:24px;background:rgba(0, 0, 0, 0.02);border-radius:8px;border:none"
   >
     <div
       aria-disabled="false"
@@ -686,7 +689,8 @@ exports[`renders ./components/collapse/demo/custom.tsx extend context correctly
     </div>
   </div>
   <div
-    class="ant-collapse-item site-collapse-custom-panel"
+    class="ant-collapse-item"
+    style="margin-bottom:24px;background:rgba(0, 0, 0, 0.02);border-radius:8px;border:none"
   >
     <div
       aria-disabled="false"

components/collapse/__tests__/__snapshots__/demo.test.ts.snap

@@ -589,10 +589,12 @@ exports[`renders ./components/collapse/demo/collapsible.tsx correctly 1`] = `
 
 exports[`renders ./components/collapse/demo/custom.tsx correctly 1`] = `
 <div
-  class="ant-collapse ant-collapse-icon-position-start ant-collapse-borderless site-collapse-custom-collapse"
+  class="ant-collapse ant-collapse-icon-position-start ant-collapse-borderless"
+  style="background:#ffffff"
 >
   <div
-    class="ant-collapse-item ant-collapse-item-active site-collapse-custom-panel"
+    class="ant-collapse-item ant-collapse-item-active"
+    style="margin-bottom:24px;background:rgba(0, 0, 0, 0.02);border-radius:8px;border:none"
   >
     <div
       aria-disabled="false"
@@ -646,7 +648,8 @@ exports[`renders ./components/collapse/demo/custom.tsx correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-collapse-item site-collapse-custom-panel"
+    class="ant-collapse-item"
+    style="margin-bottom:24px;background:rgba(0, 0, 0, 0.02);border-radius:8px;border:none"
   >
     <div
       aria-disabled="false"
@@ -686,7 +689,8 @@ exports[`renders ./components/collapse/demo/custom.tsx correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-collapse-item site-collapse-custom-panel"
+    class="ant-collapse-item"
+    style="margin-bottom:24px;background:rgba(0, 0, 0, 0.02);border-radius:8px;border:none"
   >
     <div
       aria-disabled="false"

components/collapse/demo/custom.md

@@ -5,21 +5,3 @@
 ## en-US
 
 Customize the background, border, margin styles and icon for each panel.
-
-```css
-[data-theme='compact'] .site-collapse-custom-collapse .site-collapse-custom-panel,
-.site-collapse-custom-collapse .site-collapse-custom-panel {
-  margin-bottom: 24px;
-  overflow: hidden;
-  background: #f7f7f7;
-  border: 0px !important;
-  border-radius: 2px;
-}
-```
-
-<style>
-  [data-theme="dark"] .site-collapse-custom-collapse .site-collapse-custom-panel {
-    background: rgba(255,255,255,0.04);
-    border: 0px;
-  }
-</style>

components/collapse/demo/custom.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { CaretRightOutlined } from '@ant-design/icons';
-import { Collapse } from 'antd';
+import { Collapse, theme } from 'antd';
 
 const { Panel } = Collapse;
 
@@ -10,23 +10,34 @@ const text = `
   it can be found as a welcome guest in many households across the world.
 `;
 
-const App: React.FC = () => (
-  <Collapse
-    bordered={false}
-    defaultActiveKey={['1']}
-    expandIcon={({ isActive }) => <CaretRightOutlined rotate={isActive ? 90 : 0} />}
-    className="site-collapse-custom-collapse"
-  >
-    <Panel header="This is panel header 1" key="1" className="site-collapse-custom-panel">
-      <p>{text}</p>
-    </Panel>
-    <Panel header="This is panel header 2" key="2" className="site-collapse-custom-panel">
-      <p>{text}</p>
-    </Panel>
-    <Panel header="This is panel header 3" key="3" className="site-collapse-custom-panel">
-      <p>{text}</p>
-    </Panel>
-  </Collapse>
-);
+const App: React.FC = () => {
+  const { token } = theme.useToken();
+
+  const panelStyle = {
+    marginBottom: 24,
+    background: token.colorFillAlter,
+    borderRadius: token.borderRadiusLG,
+    border: 'none',
+  };
+
+  return (
+    <Collapse
+      bordered={false}
+      defaultActiveKey={['1']}
+      expandIcon={({ isActive }) => <CaretRightOutlined rotate={isActive ? 90 : 0} />}
+      style={{ background: token.colorBgContainer }}
+    >
+      <Panel header="This is panel header 1" key="1" style={panelStyle}>
+        <p>{text}</p>
+      </Panel>
+      <Panel header="This is panel header 2" key="2" style={panelStyle}>
+        <p>{text}</p>
+      </Panel>
+      <Panel header="This is panel header 3" key="3" style={panelStyle}>
+        <p>{text}</p>
+      </Panel>
+    </Collapse>
+  );
+};
 
 export default App;