chore: 组件销毁时清空自定义样式 (#8016)

* chore: 组件销毁时清空自定义样式

* 优化

* 还原page高度

---------

Co-authored-by: qinhaoyan <30946345+qinhaoyan@users.noreply.github.com>

packages/amis-core/src/components/CustomStyle.tsx

@@ -1,35 +1,41 @@
-import {useEffect} from 'react';
+import {useEffect, useRef} from 'react';
 import type {RendererEnv} from '../env';
-import type {CustomStyleClassName} from '../utils/style-helper';
-import {insertCustomStyle, insertEditCustomStyle} from '../utils/style-helper';
+import type {InsertCustomStyle} from '../utils/style-helper';
+import {StyleDom} from '../utils/style-helper';
 
 interface CustomStyleProps {
   config: {
-    themeCss?: any;
-    classNames?: CustomStyleClassName[];
-    id?: string;
-    defaultData?: any;
     wrapperCustomStyle?: any;
     componentId?: string;
-  };
+  } & InsertCustomStyle;
   env: RendererEnv;
 }
 
 export default function (props: CustomStyleProps) {
   const {themeCss, classNames, id, defaultData, wrapperCustomStyle} =
     props.config;
+  if (!themeCss && !wrapperCustomStyle) {
+    return null;
+  }
+  const styleDom = useRef(new StyleDom(id || '')).current;
+
   useEffect(() => {
-    insertCustomStyle(
+    styleDom.insertCustomStyle({
       themeCss,
       classNames,
-      id,
       defaultData,
-      props.env?.customStyleClassPrefix
-    );
+      customStyleClassPrefix: props.env?.customStyleClassPrefix
+    });
+    return () => {
+      styleDom.removeCustomStyle();
+    };
   }, [props.config.themeCss]);
 
   useEffect(() => {
-    insertEditCustomStyle(wrapperCustomStyle, id);
+    styleDom.insertEditCustomStyle(wrapperCustomStyle);
+    return () => {
+      styleDom.removeCustomStyle('wrapperCustomStyle');
+    };
   }, [props.config.wrapperCustomStyle]);
 
   return null;

packages/amis-core/src/renderers/Item.tsx

@@ -1545,7 +1545,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
               }
             ],
             wrapperCustomStyle,
-            id: id + '-item'
+            id: id && id + '-item'
           }}
           env={env}
         />

packages/amis-core/src/utils/style-helper.ts

@@ -43,7 +43,7 @@ interface extra {
   suf?: string;
 }
 
-export function findOrCreactStyle(id: string) {
+export function findOrCreateStyle(id: string) {
   let varStyleTag = document.getElementById(id);
   if (!varStyleTag) {
     varStyleTag = document.createElement('style');
@@ -54,7 +54,7 @@ export function findOrCreactStyle(id: string) {
 }
 
 export function insertStyle(style: string, id: string) {
-  const varStyleTag = findOrCreactStyle(id);
+  const varStyleTag = findOrCreateStyle(id);
 
   // bca-disable-line
   varStyleTag.innerHTML = style;
@@ -65,7 +65,7 @@ export function insertStyle(style: string, id: string) {
 }
 
 export function addStyle(style: string, id: string) {
-  const varStyleTag = findOrCreactStyle(id);
+  const varStyleTag = findOrCreateStyle(id);
   // bca-disable-line
   varStyleTag.innerHTML += style;
 }
@@ -361,3 +361,61 @@ export function insertEditCustomStyle(customStyle: any, id?: string) {
     'wrapperCustomStyle-' + (id?.replace('u:', '') || uuid())
   );
 }
+
+export interface InsertCustomStyle {
+  themeCss?: any;
+  classNames?: CustomStyleClassName[];
+  id?: string;
+  defaultData?: any;
+  customStyleClassPrefix?: string;
+}
+
+export class StyleDom {
+  id: string;
+  constructor(id: string) {
+    this.id = id;
+  }
+  /**
+   * 插入自定义样式
+   *
+   * @param {InsertCustomStyle} params - 插入自定义样式的参数
+   * @param {string} params.themeCss - 主题样式
+   * @param {string} params.classNames - 自定义样式类名
+   * @param {string} params.defaultData - 默认数据
+   * @param {string} params.customStyleClassPrefix - 自定义样式类名前缀
+   */
+  insertCustomStyle({
+    themeCss,
+    classNames,
+    defaultData,
+    customStyleClassPrefix
+  }: InsertCustomStyle) {
+    insertCustomStyle(
+      themeCss,
+      classNames,
+      this.id,
+      defaultData,
+      customStyleClassPrefix
+    );
+  }
+
+  /**
+   * 插入外层自定义样式
+   *
+   * @param wrapperCustomStyle 自定义样式
+   */
+  insertEditCustomStyle(wrapperCustomStyle: any) {
+    insertEditCustomStyle(wrapperCustomStyle, this.id);
+  }
+  /**
+   * 移除自定义样式
+   */
+  removeCustomStyle(type?: string) {
+    const style = document.getElementById(
+      (type ? type + '-' : '') + this.id.replace('u:', '')
+    );
+    if (style) {
+      style.remove();
+    }
+  }
+}

packages/amis/src/renderers/Form/InputText.tsx

@@ -1080,6 +1080,9 @@ export default class TextControl extends React.PureComponent<
   @autobind
   formatInputThemeCss() {
     const {themeCss, css} = this.props;
+    if (!themeCss && !css) {
+      return;
+    }
     const inputFontThemeCss: any = {inputControlClassName: {}};
     const inputControlClassNameObject =
       (themeCss || css)?.inputControlClassName || {};
@@ -1153,7 +1156,7 @@ export default class TextControl extends React.PureComponent<
                 }
               }
             ],
-            id: id + '-inner'
+            id: id && id + '-inner'
           }}
           env={env}
         />
@@ -1167,7 +1170,7 @@ export default class TextControl extends React.PureComponent<
                 value: addOnClassName
               }
             ],
-            id: id + '-addOn'
+            id: id && id + '-addOn'
           }}
           env={env}
         />