[tabs] :less to cssinjs

components/style.ts

@@ -8,7 +8,7 @@ import './radio/style';
 // import './pagination/style';
 // import './avatar/style';
 // import './badge/style';
-import './tabs/style';
+//import './tabs/style';
 // import './input/style';
 // import './tooltip/style';
 // import './popover/style';

components/tabs/src/Tabs.tsx

@@ -28,7 +28,7 @@ import pick from 'lodash-es/pick';
 import PropTypes from '../../_util/vue-types';
 import type { MouseEventHandler } from '../../_util/EventInterface';
 import omit from '../../_util/omit';
-
+import useStyle from '../style';
 export type TabsType = 'line' | 'card' | 'editable-card';
 export type TabsPosition = 'top' | 'right' | 'bottom' | 'left';
 
@@ -155,6 +155,7 @@ const InternalTabs = defineComponent({
       '`tabBarExtraContent` slot is deprecated. Please use `rightExtra` slot instead.',
     );
     const { prefixCls, direction, size, rootPrefixCls } = useConfigInject('tabs', props);
+    const [wrapSSR, hashId] = useStyle(prefixCls);
     const rtl = computed(() => direction.value === 'rtl');
     const mergedAnimated = computed<AnimatedConfig>(() => {
       const { animated, tabPosition } = props;
@@ -297,14 +298,15 @@ const InternalTabs = defineComponent({
       }
       const pre = prefixCls.value;
 
-      return (
+      return wrapSSR(
         <div
           {...attrs}
           id={id}
           class={classNames(
             pre,
             `${pre}-${mergedTabPosition.value}`,
             {
+              [hashId.value]: true,
               [`${pre}-${size.value}`]: size.value,
               [`${pre}-card`]: ['card', 'editable-card'].includes(type as string),
               [`${pre}-editable-card`]: type === 'editable-card',
@@ -322,7 +324,7 @@ const InternalTabs = defineComponent({
             {...sharedProps}
             animated={mergedAnimated.value}
           />
-        </div>
+        </div>,
       );
     };
   },

components/tabs/style/card.tsx

@@ -0,0 +1,101 @@
+import type { CSSObject } from '../../_util/cssinjs';
+
+export const tabsCardStyle:{tabsCardGutter:string}={
+  tabsCardGutter: '2px'
+}
+export const genTabscardStyle = (token): CSSObject => {
+  const { componentCls } = token;
+
+  return {
+    [` ${componentCls}-nav,
+     div > ${componentCls}-nav `]: {
+      [`${componentCls}-tab `]: {
+        margin: 0,
+        background: `${token.colorFillAlter}`,
+        padding: `${token.paddingXS}px ${token.padding}px`,
+        border:`${token.lineWidth}px ${token.colorBorder}   ${token.lineType} `, 
+        transition: `all ${token.motionDurationSlow} ${token.motionEaseInOut} `,
+
+        [`&-active `]: {
+          color: `  ${token.colorInfoActive}`,
+          background: `${token.colorBgContainer}`,
+        },
+      },
+
+      [`${componentCls}-ink-bar`]: {
+        visibility: `hidden`,
+      },
+    },
+
+    // ========================== Top & Bottom ==========================
+    [`&${componentCls}-top,
+    &${componentCls}-bottom`]: {
+      [`${componentCls}-nav,
+       div > ${componentCls}-nav `]: {
+        [` ${componentCls}-tab + ${componentCls}-tab `]: {
+          marginLeft: `${tabsCardStyle.tabsCardGutter} `,
+        },
+      },
+    },
+
+    [`&${componentCls}-top `]: {
+      [`${componentCls}-nav,
+       div > ${componentCls}-nav `]: {
+        [`${componentCls}-tab `]: {
+          borderRadius: ` ${token.radiusBase}px  ${token.radiusBase}px 0 0`,
+          [`&-active `]: {
+            borderBottomColor: `${token.colorBgContainer}`,
+          },
+        },
+      },
+    },
+    [`&${componentCls}-bottom`]: {
+      [`${componentCls}-nav,
+       div > ${componentCls}-nav`]: {
+        [` ${componentCls}-tab `]: {
+          borderRadius: `0 0 ${token.radiusBase}px ${token.radiusBase}px`,
+
+          [` &-active `]: {
+            borderTopColor:  `${token.colorBgContainer}`,
+          },
+        },
+      },
+    },
+
+    // ========================== Left & Right ==========================
+    [`&${componentCls}-left,
+    &${componentCls}-right`]: {
+      [`   ${componentCls}-nav,
+       div > ${componentCls}-nav `]: {
+        [`   ${componentCls}-tab + ${componentCls}-tab`]: {
+          marginTop: `${tabsCardStyle.tabsCardGutter}`,
+        },
+      },
+    },
+
+    [`&${componentCls}-left`]: {
+      [` > ${componentCls}-nav,
+      > div > ${componentCls}-nav`]: {
+        [` ${componentCls}-tab`]: {
+          borderRadius: `${token.radiusBase}px 0 0 ${token.radiusBase}px`,
+
+          [` &-active`]: {
+            borderRightColor: `${token.colorBgContainer}`,
+          },
+        },
+      },
+    },
+    [` &${componentCls}-right `]: {
+      [` ${componentCls}-nav,
+       div > ${componentCls}-nav `]: {
+        [`    ${componentCls}-tab `]: {
+          borderRadius: `0 ${token.radiusBase}px ${token.radiusBase}px 0`,
+
+          [`   &-active `]: {
+            borderLeftColor:`${token.colorBgContainer}`,
+          },
+        },
+      },
+    },
+  };
+};