diff --git a/packages/amis-core/src/components/CustomStyle.tsx b/packages/amis-core/src/components/CustomStyle.tsx index 86a13ffd8f4..eb69d8d100f 100644 --- a/packages/amis-core/src/components/CustomStyle.tsx +++ b/packages/amis-core/src/components/CustomStyle.tsx @@ -1,7 +1,7 @@ -import {useEffect, useState} 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: { @@ -11,71 +11,13 @@ interface CustomStyleProps { env: RendererEnv; } -interface InsertCustomStyle { - themeCss?: any; - classNames?: CustomStyleClassName[]; - id?: string; - defaultData?: any; - customStyleClassPrefix?: string; -} - -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(); - } - } -} - export default function (props: CustomStyleProps) { const {themeCss, classNames, id, defaultData, wrapperCustomStyle} = props.config; if (!themeCss && !wrapperCustomStyle) { return null; } - const [styleDom] = useState(new StyleDom(id || '')); + const styleDom = useRef(new StyleDom(id || '')).current; useEffect(() => { styleDom.insertCustomStyle({ diff --git a/packages/amis-core/src/utils/style-helper.ts b/packages/amis-core/src/utils/style-helper.ts index 29d529b8aa5..daeaeaa5479 100644 --- a/packages/amis-core/src/utils/style-helper.ts +++ b/packages/amis-core/src/utils/style-helper.ts @@ -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(); + } + } +} diff --git a/packages/amis-ui/scss/components/_page.scss b/packages/amis-ui/scss/components/_page.scss index 97c466e213d..6398dd94338 100644 --- a/packages/amis-ui/scss/components/_page.scss +++ b/packages/amis-ui/scss/components/_page.scss @@ -17,7 +17,6 @@ &-content { padding: var(--Page-content-paddingY) var(--Page-content-paddingX); position: relative; - height: 100%; width: 100%; }