diff --git a/components/checkbox/Checkbox.tsx b/components/checkbox/Checkbox.tsx
index f575a159c8..d42d1a01ea 100644
--- a/components/checkbox/Checkbox.tsx
+++ b/components/checkbox/Checkbox.tsx
@@ -113,8 +113,8 @@ const InternalCheckbox: React.ForwardRefRenderFunction<CheckboxRef, CheckboxProp
     checkboxProps.checked = checkboxGroup.value.includes(restProps.value);
   }
   const classString = classNames(
+    `${prefixCls}-wrapper`,
     {
-      [`${prefixCls}-wrapper`]: true,
       [`${prefixCls}-rtl`]: direction === 'rtl',
       [`${prefixCls}-wrapper-checked`]: checkboxProps.checked,
       [`${prefixCls}-wrapper-disabled`]: mergedDisabled,
diff --git a/components/form/Form.tsx b/components/form/Form.tsx
index 205c9d0117..72922d0a0a 100644
--- a/components/form/Form.tsx
+++ b/components/form/Form.tsx
@@ -101,8 +101,8 @@ const InternalForm: React.ForwardRefRenderFunction<FormInstance, FormProps> = (p
 
   const formClassName = classNames(
     prefixCls,
+    `${prefixCls}-${layout}`,
     {
-      [`${prefixCls}-${layout}`]: true,
       [`${prefixCls}-hide-required-mark`]: mergedRequiredMark === false,
       [`${prefixCls}-rtl`]: direction === 'rtl',
       [`${prefixCls}-${mergedSize}`]: mergedSize,
diff --git a/components/space/Compact.tsx b/components/space/Compact.tsx
index c0e7cb2add..b3560a71c1 100644
--- a/components/space/Compact.tsx
+++ b/components/space/Compact.tsx
@@ -30,8 +30,7 @@ export const useCompactItemContext = (prefixCls: string, direction: DirectionTyp
     const { compactDirection, isFirstItem, isLastItem } = compactItemContext;
     const separator = compactDirection === 'vertical' ? '-vertical-' : '-';
 
-    return classNames({
-      [`${prefixCls}-compact${separator}item`]: true,
+    return classNames(`${prefixCls}-compact${separator}item`, {
       [`${prefixCls}-compact${separator}first-item`]: isFirstItem,
       [`${prefixCls}-compact${separator}last-item`]: isLastItem,
       [`${prefixCls}-compact${separator}item-rtl`]: direction === 'rtl',
diff --git a/components/space/Item.tsx b/components/space/Item.tsx
index a99db877d9..cf32a9e639 100644
--- a/components/space/Item.tsx
+++ b/components/space/Item.tsx
@@ -12,7 +12,7 @@ export interface ItemProps {
   style?: React.CSSProperties;
 }
 
-export default function Item({
+const Item: React.FC<ItemProps> = ({
   className,
   direction,
   index,
@@ -21,7 +21,7 @@ export default function Item({
   split,
   wrap,
   style: customStyle,
-}: ItemProps) {
+}) => {
   const { horizontalSize, verticalSize, latestIndex, supportFlexGap } =
     React.useContext(SpaceContext);
 
@@ -56,4 +56,6 @@ export default function Item({
       )}
     </>
   );
-}
+};
+
+export default Item;
diff --git a/components/tag/CheckableTag.tsx b/components/tag/CheckableTag.tsx
index b806786c65..7690c48f7c 100644
--- a/components/tag/CheckableTag.tsx
+++ b/components/tag/CheckableTag.tsx
@@ -40,8 +40,8 @@ const CheckableTag: React.FC<CheckableTagProps> = (props) => {
 
   const cls = classNames(
     prefixCls,
+    `${prefixCls}-checkable`,
     {
-      [`${prefixCls}-checkable`]: true,
       [`${prefixCls}-checkable-checked`]: checked,
     },
     className,
diff --git a/components/timeline/TimelineItem.tsx b/components/timeline/TimelineItem.tsx
index f9e0fcbeee..8e78b14d69 100644
--- a/components/timeline/TimelineItem.tsx
+++ b/components/timeline/TimelineItem.tsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import * as React from 'react';
-import { ConfigContext } from '../config-provider';
 import type { LiteralUnion } from '../_util/type';
+import { ConfigContext } from '../config-provider';
 
 type Color = 'blue' | 'red' | 'green' | 'gray';
 
@@ -39,8 +39,8 @@ const TimelineItem: React.FC<TimelineItemProps> = ({
 
   const prefixCls = getPrefixCls('timeline', customizePrefixCls);
   const itemClassName = classNames(
+    `${prefixCls}-item`,
     {
-      [`${prefixCls}-item`]: true,
       [`${prefixCls}-item-pending`]: pending,
     },
     className,
@@ -48,8 +48,7 @@ const TimelineItem: React.FC<TimelineItemProps> = ({
 
   const customColor = /blue|red|green|gray/.test(color || '') ? undefined : color;
 
-  const dotClassName = classNames({
-    [`${prefixCls}-item-head`]: true,
+  const dotClassName = classNames(`${prefixCls}-item-head`, {
     [`${prefixCls}-item-head-custom`]: !!dot,
     [`${prefixCls}-item-head-${color}`]: !customColor,
   });
diff --git a/components/upload/UploadList/index.tsx b/components/upload/UploadList/index.tsx
index 598024ccb3..a98e3ae684 100644
--- a/components/upload/UploadList/index.tsx
+++ b/components/upload/UploadList/index.tsx
@@ -165,8 +165,7 @@ const InternalUploadList: React.ForwardRefRenderFunction<UploadListRef, UploadLi
   const prefixCls = getPrefixCls('upload', customizePrefixCls);
   const rootPrefixCls = getPrefixCls();
 
-  const listClassNames = classNames({
-    [`${prefixCls}-list`]: true,
+  const listClassNames = classNames(`${prefixCls}-list`, {
     [`${prefixCls}-list-${listType}`]: true,
   });