diff --git a/components/auto-complete/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/auto-complete/__tests__/__snapshots__/demo-extend.test.ts.snap
index 48236a3d3e..0375753978 100644
--- a/components/auto-complete/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/auto-complete/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -2728,7 +2728,7 @@ exports[`renders components/auto-complete/demo/style-class.tsx extend context co
       </div>
       <div
         class="rc-virtual-list"
-        style="background-color: rgb(249, 249, 249); position: relative;"
+        style="background-color: rgba(240, 240, 240, 0.85); position: relative;"
       >
         <div
           class="rc-virtual-list-holder"
@@ -2741,6 +2741,7 @@ exports[`renders components/auto-complete/demo/style-class.tsx extend context co
             >
               <div
                 class="ant-select-item ant-select-item-option"
+                style="color: rgb(39, 39, 39);"
                 title="Burnaby"
               >
                 <div
@@ -2757,6 +2758,7 @@ exports[`renders components/auto-complete/demo/style-class.tsx extend context co
               </div>
               <div
                 class="ant-select-item ant-select-item-option"
+                style="color: rgb(39, 39, 39);"
                 title="Seattle"
               >
                 <div
@@ -2773,6 +2775,7 @@ exports[`renders components/auto-complete/demo/style-class.tsx extend context co
               </div>
               <div
                 class="ant-select-item ant-select-item-option"
+                style="color: rgb(39, 39, 39);"
                 title="Los Angeles"
               >
                 <div
@@ -2789,6 +2792,7 @@ exports[`renders components/auto-complete/demo/style-class.tsx extend context co
               </div>
               <div
                 class="ant-select-item ant-select-item-option"
+                style="color: rgb(39, 39, 39);"
                 title="San Francisco"
               >
                 <div
@@ -2805,6 +2809,7 @@ exports[`renders components/auto-complete/demo/style-class.tsx extend context co
               </div>
               <div
                 class="ant-select-item ant-select-item-option"
+                style="color: rgb(39, 39, 39);"
                 title="Meet student"
               >
                 <div
@@ -2873,7 +2878,7 @@ exports[`renders components/auto-complete/demo/style-class.tsx extend context co
       </div>
       <div
         class="rc-virtual-list"
-        style="background-color: rgb(240, 240, 240); position: relative;"
+        style="background-color: rgba(240, 240, 240, 0.85); position: relative;"
       >
         <div
           class="rc-virtual-list-holder"
@@ -2886,6 +2891,7 @@ exports[`renders components/auto-complete/demo/style-class.tsx extend context co
             >
               <div
                 class="ant-select-item ant-select-item-option"
+                style="color: rgb(39, 39, 39);"
                 title="Burnaby"
               >
                 <div
@@ -2902,6 +2908,7 @@ exports[`renders components/auto-complete/demo/style-class.tsx extend context co
               </div>
               <div
                 class="ant-select-item ant-select-item-option"
+                style="color: rgb(39, 39, 39);"
                 title="Seattle"
               >
                 <div
@@ -2918,6 +2925,7 @@ exports[`renders components/auto-complete/demo/style-class.tsx extend context co
               </div>
               <div
                 class="ant-select-item ant-select-item-option"
+                style="color: rgb(39, 39, 39);"
                 title="Los Angeles"
               >
                 <div
@@ -2934,6 +2942,7 @@ exports[`renders components/auto-complete/demo/style-class.tsx extend context co
               </div>
               <div
                 class="ant-select-item ant-select-item-option"
+                style="color: rgb(39, 39, 39);"
                 title="San Francisco"
               >
                 <div
@@ -2950,6 +2959,7 @@ exports[`renders components/auto-complete/demo/style-class.tsx extend context co
               </div>
               <div
                 class="ant-select-item ant-select-item-option"
+                style="color: rgb(39, 39, 39);"
                 title="Meet student"
               >
                 <div
diff --git a/components/auto-complete/demo/style-class.tsx b/components/auto-complete/demo/style-class.tsx
index 303b95c8be..9af3d01e17 100644
--- a/components/auto-complete/demo/style-class.tsx
+++ b/components/auto-complete/demo/style-class.tsx
@@ -12,7 +12,8 @@ const useStyle = createStyles(({ css }) => ({
 const stylesObject: AutoCompleteProps['styles'] = {
   popup: {
     root: { borderWidth: 1, borderColor: '#1890ff' },
-    list: { backgroundColor: '#f9f9f9' },
+    list: { backgroundColor: 'rgba(240,240,240, 0.85)' },
+    listItem: { color: '#272727' },
   },
 };
 
@@ -21,7 +22,8 @@ const stylesFn: AutoCompleteProps['styles'] = ({ props }) => {
     return {
       popup: {
         root: { borderWidth: 1, borderColor: '#ccc' },
-        list: { backgroundColor: '#f0f0f0' },
+        list: { backgroundColor: 'rgba(240,240,240, 0.85)' },
+        listItem: { color: '#272727' },
       },
     } satisfies AutoCompleteProps['styles'];
   }
diff --git a/components/input-number/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/input-number/__tests__/__snapshots__/demo-extend.test.ts.snap
index d585fc05ce..ff5daa977e 100644
--- a/components/input-number/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/input-number/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -4494,7 +4494,7 @@ exports[`renders components/input-number/demo/style-class.tsx extend context cor
   </div>
   <div
     class="ant-input-number ant-input-number-lg ant-input-number-outlined ant-input-number-mode-input css-var-test-id ant-input-number-css-var acss-1tkizl6"
-    style="background-color: rgb(250, 250, 250); border-color: rgb(114, 46, 209);"
+    style="background-color: rgba(250, 250, 250, 0.5); border-color: rgb(114, 46, 209);"
   >
     <div
       class="ant-input-number-handler-wrap"
diff --git a/components/input-number/__tests__/__snapshots__/demo.test.tsx.snap b/components/input-number/__tests__/__snapshots__/demo.test.tsx.snap
index 4a362615ed..b4270970bd 100644
--- a/components/input-number/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/input-number/__tests__/__snapshots__/demo.test.tsx.snap
@@ -4201,7 +4201,7 @@ exports[`renders components/input-number/demo/style-class.tsx correctly 1`] = `
   </div>
   <div
     class="ant-input-number ant-input-number-lg ant-input-number-outlined ant-input-number-mode-input css-var-test-id ant-input-number-css-var acss-1tkizl6"
-    style="background-color:#fafafa;border-color:#722ed1"
+    style="background-color:rgba(250,250,250, 0.5);border-color:#722ed1"
   >
     <div
       class="ant-input-number-handler-wrap"
diff --git a/components/input-number/demo/style-class.tsx b/components/input-number/demo/style-class.tsx
index 6ba21fcda1..cea7bdf909 100644
--- a/components/input-number/demo/style-class.tsx
+++ b/components/input-number/demo/style-class.tsx
@@ -21,7 +21,7 @@ const stylesFn: InputNumberProps['styles'] = ({ props }) => {
   if (props.size === 'large') {
     return {
       root: {
-        backgroundColor: '#fafafa',
+        backgroundColor: 'rgba(250,250,250, 0.5)',
         borderColor: '#722ed1',
       },
     } satisfies InputNumberProps['styles'];
diff --git a/components/splitter/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/splitter/__tests__/__snapshots__/demo-extend.test.ts.snap
index 1258de0c68..5b284a2dbb 100644
--- a/components/splitter/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/splitter/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1310,7 +1310,7 @@ exports[`renders components/splitter/demo/style-class.tsx extend context correct
       >
         <h5
           class="ant-typography ant-typography-secondary css-var-test-id"
-          style="white-space: nowrap;"
+          style="color: rgb(0, 0, 0);"
         >
           First
         </h5>
@@ -1338,7 +1338,7 @@ exports[`renders components/splitter/demo/style-class.tsx extend context correct
       >
         <h5
           class="ant-typography ant-typography-secondary css-var-test-id"
-          style="white-space: nowrap;"
+          style="color: rgb(0, 0, 0);"
         >
           Second
         </h5>
@@ -1359,7 +1359,6 @@ exports[`renders components/splitter/demo/style-class.tsx extend context correct
       >
         <h5
           class="ant-typography ant-typography-secondary css-var-test-id"
-          style="white-space: nowrap;"
         >
           First
         </h5>
@@ -1386,7 +1385,6 @@ exports[`renders components/splitter/demo/style-class.tsx extend context correct
       >
         <h5
           class="ant-typography ant-typography-secondary css-var-test-id"
-          style="white-space: nowrap;"
         >
           Second
         </h5>
diff --git a/components/splitter/__tests__/__snapshots__/demo.test.ts.snap b/components/splitter/__tests__/__snapshots__/demo.test.ts.snap
index 63cd594659..e9033d0a9e 100644
--- a/components/splitter/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/splitter/__tests__/__snapshots__/demo.test.ts.snap
@@ -1293,7 +1293,7 @@ exports[`renders components/splitter/demo/style-class.tsx correctly 1`] = `
       >
         <h5
           class="ant-typography ant-typography-secondary css-var-test-id"
-          style="white-space:nowrap"
+          style="color:#000"
         >
           First
         </h5>
@@ -1321,7 +1321,7 @@ exports[`renders components/splitter/demo/style-class.tsx correctly 1`] = `
       >
         <h5
           class="ant-typography ant-typography-secondary css-var-test-id"
-          style="white-space:nowrap"
+          style="color:#000"
         >
           Second
         </h5>
@@ -1342,7 +1342,6 @@ exports[`renders components/splitter/demo/style-class.tsx correctly 1`] = `
       >
         <h5
           class="ant-typography ant-typography-secondary css-var-test-id"
-          style="white-space:nowrap"
         >
           First
         </h5>
@@ -1369,7 +1368,6 @@ exports[`renders components/splitter/demo/style-class.tsx correctly 1`] = `
       >
         <h5
           class="ant-typography ant-typography-secondary css-var-test-id"
-          style="white-space:nowrap"
         >
           Second
         </h5>
diff --git a/components/splitter/demo/style-class.tsx b/components/splitter/demo/style-class.tsx
index 064a1edc67..5b9ce5dae6 100644
--- a/components/splitter/demo/style-class.tsx
+++ b/components/splitter/demo/style-class.tsx
@@ -3,10 +3,12 @@ import { Flex, Splitter, Typography } from 'antd';
 import type { SplitterProps } from 'antd';
 import { createStyles } from 'antd-style';
 
-const Desc: React.FC<Readonly<{ text?: string | number }>> = (props) => {
+const Desc: React.FC<Readonly<{ text?: string | number; style?: React.CSSProperties }>> = (
+  props,
+) => {
   return (
     <Flex justify="center" align="center" style={{ height: '100%' }}>
-      <Typography.Title type="secondary" level={5} style={{ whiteSpace: 'nowrap' }}>
+      <Typography.Title type="secondary" level={5} style={props.style}>
         {props.text}
       </Typography.Title>
     </Flex>
@@ -49,10 +51,10 @@ const App: React.FC = () => {
     <Flex vertical gap="large">
       <Splitter {...splitSharedProps} styles={stylesObject}>
         <Splitter.Panel>
-          <Desc text="First" />
+          <Desc text="First" style={{ color: '#000' }} />
         </Splitter.Panel>
         <Splitter.Panel>
-          <Desc text="Second" />
+          <Desc text="Second" style={{ color: '#000' }} />
         </Splitter.Panel>
       </Splitter>
       <Splitter {...splitSharedProps} styles={stylesFn}>
diff --git a/components/transfer/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/transfer/__tests__/__snapshots__/demo-extend.test.ts.snap
index 577f69ebcd..c175b49919 100644
--- a/components/transfer/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/transfer/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -11446,8 +11446,7 @@ exports[`renders components/transfer/demo/style-class.tsx extend context correct
     class="ant-transfer ant-transfer-status-error css-var-test-id"
   >
     <div
-      class="ant-transfer-section acss-qd6duc"
-      style="background-color: rgb(250, 250, 250);"
+      class="ant-transfer-section acss-yvv4da"
     >
       <div
         class="ant-transfer-list-header acss-r4s437"
@@ -11859,8 +11858,7 @@ exports[`renders components/transfer/demo/style-class.tsx extend context correct
       </div>
     </div>
     <div
-      class="ant-transfer-actions"
-      style="background-color: rgb(255, 242, 232);"
+      class="ant-transfer-actions acss-rzg7ne"
     >
       <button
         class="ant-btn css-var-test-id ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-sm ant-btn-icon-only"
@@ -11922,8 +11920,7 @@ exports[`renders components/transfer/demo/style-class.tsx extend context correct
       </button>
     </div>
     <div
-      class="ant-transfer-section acss-qd6duc"
-      style="background-color: rgb(250, 250, 250);"
+      class="ant-transfer-section acss-yvv4da"
     >
       <div
         class="ant-transfer-list-header acss-r4s437"
@@ -12289,8 +12286,8 @@ exports[`renders components/transfer/demo/style-class.tsx extend context correct
     class="ant-transfer ant-transfer-status-warning css-var-test-id"
   >
     <div
-      class="ant-transfer-section acss-qd6duc"
-      style="background-color: rgb(246, 255, 237); border-color: rgb(183, 235, 143);"
+      class="ant-transfer-section acss-yvv4da"
+      style="background-color: rgba(246, 255, 237, 0.6); border-color: rgb(183, 235, 143);"
     >
       <div
         class="ant-transfer-list-header acss-r4s437"
@@ -12702,7 +12699,7 @@ exports[`renders components/transfer/demo/style-class.tsx extend context correct
       </div>
     </div>
     <div
-      class="ant-transfer-actions"
+      class="ant-transfer-actions acss-rzg7ne"
     >
       <button
         class="ant-btn css-var-test-id ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-sm ant-btn-icon-only"
@@ -12764,8 +12761,8 @@ exports[`renders components/transfer/demo/style-class.tsx extend context correct
       </button>
     </div>
     <div
-      class="ant-transfer-section acss-qd6duc"
-      style="background-color: rgb(246, 255, 237); border-color: rgb(183, 235, 143);"
+      class="ant-transfer-section acss-yvv4da"
+      style="background-color: rgba(246, 255, 237, 0.6); border-color: rgb(183, 235, 143);"
     >
       <div
         class="ant-transfer-list-header acss-r4s437"
diff --git a/components/transfer/__tests__/__snapshots__/demo.test.ts.snap b/components/transfer/__tests__/__snapshots__/demo.test.ts.snap
index 869e0a508f..a2ca33018d 100644
--- a/components/transfer/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/transfer/__tests__/__snapshots__/demo.test.ts.snap
@@ -7431,8 +7431,7 @@ exports[`renders components/transfer/demo/style-class.tsx correctly 1`] = `
     class="ant-transfer ant-transfer-status-error css-var-test-id"
   >
     <div
-      class="ant-transfer-section acss-qd6duc"
-      style="background-color:#fafafa"
+      class="ant-transfer-section acss-yvv4da"
     >
       <div
         class="ant-transfer-list-header acss-r4s437"
@@ -7769,8 +7768,7 @@ exports[`renders components/transfer/demo/style-class.tsx correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-transfer-actions"
-      style="background-color:#fff2e8"
+      class="ant-transfer-actions acss-rzg7ne"
     >
       <button
         class="ant-btn css-var-test-id ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-sm ant-btn-icon-only"
@@ -7832,8 +7830,7 @@ exports[`renders components/transfer/demo/style-class.tsx correctly 1`] = `
       </button>
     </div>
     <div
-      class="ant-transfer-section acss-qd6duc"
-      style="background-color:#fafafa"
+      class="ant-transfer-section acss-yvv4da"
     >
       <div
         class="ant-transfer-list-header acss-r4s437"
@@ -8124,8 +8121,8 @@ exports[`renders components/transfer/demo/style-class.tsx correctly 1`] = `
     class="ant-transfer ant-transfer-status-warning css-var-test-id"
   >
     <div
-      class="ant-transfer-section acss-qd6duc"
-      style="background-color:#f6ffed;border-color:#b7eb8f"
+      class="ant-transfer-section acss-yvv4da"
+      style="background-color:rgba(246,255,237, 0.6);border-color:#b7eb8f"
     >
       <div
         class="ant-transfer-list-header acss-r4s437"
@@ -8462,7 +8459,7 @@ exports[`renders components/transfer/demo/style-class.tsx correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-transfer-actions"
+      class="ant-transfer-actions acss-rzg7ne"
     >
       <button
         class="ant-btn css-var-test-id ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-sm ant-btn-icon-only"
@@ -8524,8 +8521,8 @@ exports[`renders components/transfer/demo/style-class.tsx correctly 1`] = `
       </button>
     </div>
     <div
-      class="ant-transfer-section acss-qd6duc"
-      style="background-color:#f6ffed;border-color:#b7eb8f"
+      class="ant-transfer-section acss-yvv4da"
+      style="background-color:rgba(246,255,237, 0.6);border-color:#b7eb8f"
     >
       <div
         class="ant-transfer-list-header acss-r4s437"
diff --git a/components/transfer/demo/style-class.tsx b/components/transfer/demo/style-class.tsx
index d47005ed6b..63519556a4 100644
--- a/components/transfer/demo/style-class.tsx
+++ b/components/transfer/demo/style-class.tsx
@@ -3,9 +3,14 @@ import { Flex, Transfer } from 'antd';
 import type { TransferProps } from 'antd';
 import { createStyles } from 'antd-style';
 
-const useStyles = createStyles(({ token }) => ({
-  section: { backgroundColor: '#fafafa' },
+const useStyles = createStyles(({ token, css }) => ({
+  section: { backgroundColor: 'rgba(250,250,250, 0.5)' },
   header: { color: token.colorPrimary },
+  actions: css`
+    & button {
+      background-color: rgba(255,242,232,0.6);
+    }
+  `,
 }));
 
 const mockData = Array.from({ length: 20 }).map<any>((_, i) => ({
@@ -17,15 +22,13 @@ const mockData = Array.from({ length: 20 }).map<any>((_, i) => ({
 const initialTargetKeys = mockData.filter((item) => Number(item.key) > 10).map((item) => item.key);
 
 const stylesObject: TransferProps['styles'] = {
-  section: { backgroundColor: '#fafafa' },
   header: { fontWeight: 'bold' },
-  actions: { backgroundColor: '#fff2e8' },
 };
 
 const stylesFn: TransferProps['styles'] = (info) => {
   if (info.props.status === 'warning') {
     return {
-      section: { backgroundColor: '#f6ffed', borderColor: '#b7eb8f' },
+      section: { backgroundColor: 'rgba(246,255,237, 0.6)', borderColor: '#b7eb8f' },
       header: { color: '#8DBCC7', fontWeight: 'normal' },
     } satisfies TransferProps['styles'];
   }