refactor:calendar

components/calendar/generateCalendar.tsx

@@ -17,6 +17,9 @@ import { computed, defineComponent, toRef } from 'vue';
 import useConfigInject from '../config-provider/hooks/useConfigInject';
 import classNames from '../_util/classNames';
 
+// CSSINJS
+import useStyle from './style';
+
 type InjectDefaultProps<Props> = Omit<
   Props,
   'locale' | 'generateConfig' | 'prevIcon' | 'nextIcon' | 'superPrevIcon' | 'superNextIcon'
@@ -117,6 +120,10 @@ function generateCalendar<
     ],
     setup(props, { emit, slots, attrs }) {
       const { prefixCls, direction } = useConfigInject('picker', props);
+
+      // style
+      const [wrapSSR, hashId] = useStyle(prefixCls);
+
       const calendarPrefixCls = computed(() => `${prefixCls.value}-calendar`);
       const maybeToString = (date: DateType) => {
         return props.valueFormat ? generateConfig.toString(date, props.valueFormat) : date;
@@ -273,7 +280,7 @@ function generateCalendar<
             </div>
           );
         };
-        return (
+        return wrapSSR(
           <div
             {...attrs}
             class={classNames(
@@ -284,6 +291,7 @@ function generateCalendar<
                 [`${calendarPrefixCls.value}-rtl`]: direction.value === 'rtl',
               },
               attrs.class,
+              hashId.value,
             )}
           >
             {headerRender ? (
@@ -319,7 +327,7 @@ function generateCalendar<
               disabledDate={mergedDisabledDate.value}
               hideHeader
             />
-          </div>
+          </div>,
         );
       };
     },

components/calendar/index.en-US.md

@@ -2,7 +2,7 @@
 category: Components
 type: Data Display
 title: Calendar
-cover: https://gw.alipayobjects.com/zos/antfincdn/dPQmLq08DI/Calendar.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*nF6_To7pDSAAAAAAAAAAAAAADrJ8AQ/original
 ---
 
 Container for displaying data in calendar form.

components/calendar/index.zh-CN.md

@@ -3,7 +3,7 @@ category: Components
 type: 数据展示
 title: Calendar
 subtitle: 日历
-cover: https://gw.alipayobjects.com/zos/antfincdn/dPQmLq08DI/Calendar.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*nF6_To7pDSAAAAAAAAAAAAAADrJ8AQ/original
 ---
 
 按照日历形式展示数据的容器。