refactor(layout): less to cssinjs (#6249)

Author: buqiyuan

components/layout/layout.tsx

@@ -2,6 +2,7 @@ import type { ExtractPropTypes, HTMLAttributes } from 'vue';
 import { computed, createVNode, defineComponent, provide, ref } from 'vue';
 import useConfigInject from '../config-provider/hooks/useConfigInject';
 import { SiderHookProviderKey } from './injectionKey';
+import useStyle from './style';
 
 export const basicProps = () => ({
   prefixCls: String,
@@ -18,7 +19,7 @@ type GeneratorArgument = {
 };
 
 function generator({ suffixCls, tagName, name }: GeneratorArgument) {
-  return (BasicComponent: typeof Basic) => {
+  return (BasicComponent: typeof BasicLayout) => {
     const Adapter = defineComponent({
       compatConfig: { MODE: 3 },
       name,
@@ -49,9 +50,11 @@ const Basic = defineComponent({
 
 const BasicLayout = defineComponent({
   compatConfig: { MODE: 3 },
+  inheritAttrs: false,
   props: basicProps(),
-  setup(props, { slots }) {
-    const { direction } = useConfigInject('', props);
+  setup(props, { slots, attrs }) {
+    const { prefixCls, direction } = useConfigInject('', props);
+    const [wrapSSR, hashId] = useStyle(prefixCls);
     const siders = ref<string[]>([]);
     const siderHookProvider = {
       addSider: (id: string) => {
@@ -66,6 +69,7 @@ const BasicLayout = defineComponent({
     const divCls = computed(() => {
       const { prefixCls, hasSider } = props;
       return {
+        [hashId.value]: true,
         [`${prefixCls}`]: true,
         [`${prefixCls}-has-sider`]:
           typeof hasSider === 'boolean' ? hasSider : siders.value.length > 0,
@@ -74,7 +78,7 @@ const BasicLayout = defineComponent({
     });
     return () => {
       const { tagName } = props;
-      return createVNode(tagName, { class: divCls.value }, slots);
+      return wrapSSR(createVNode(tagName, { ...attrs, class: [divCls.value, attrs.class] }, slots));
     };
   },
 });