diff --git a/packages/core/client/src/schema-component/antd/variable/Input.tsx b/packages/core/client/src/schema-component/antd/variable/Input.tsx
index 9a95ae2ded..23993aad16 100644
--- a/packages/core/client/src/schema-component/antd/variable/Input.tsx
+++ b/packages/core/client/src/schema-component/antd/variable/Input.tsx
@@ -398,105 +398,107 @@ export function Input(props: VariableInputProps) {
   const disabled = props.disabled || form.disabled;
 
   return wrapSSR(
-    <Space.Compact style={style} className={classNames(componentCls, hashId, className)}>
-      {/* 确保所有ant input样式都已加载 */}
-      <AntInput style={{ display: 'none' }} />
-      {variable ? (
-        <div
-          className={cx(
-            'variable',
-            css`
-              position: relative;
-              line-height: 0;
-
-              &:hover {
-                .clear-button {
-                  display: inline-block;
-                }
-              }
-
-              .ant-input {
-                overflow: auto;
-                white-space: nowrap;
-                ${disabled ? '' : 'padding-right: 28px;'}
-
-                .ant-tag {
-                  display: inline;
-                  line-height: 19px;
-                  margin: 0;
-                  padding: 2px 7px;
-                  border-radius: 10px;
-                }
-              }
-            `,
-          )}
-        >
+    <>
+      <Space.Compact style={style} className={classNames(componentCls, hashId, className)}>
+        {variable ? (
           <div
-            role="button"
-            aria-label="variable-tag"
-            style={{ overflow: 'hidden' }}
-            className={cx('ant-input ant-input-outlined', { 'ant-input-disabled': disabled }, hashId)}
+            className={cx(
+              'variable',
+              css`
+                position: relative;
+                line-height: 0;
+
+                &:hover {
+                  .clear-button {
+                    display: inline-block;
+                  }
+                }
+
+                .ant-input {
+                  overflow: auto;
+                  white-space: nowrap;
+                  ${disabled ? '' : 'padding-right: 28px;'}
+
+                  .ant-tag {
+                    display: inline;
+                    line-height: 19px;
+                    margin: 0;
+                    padding: 2px 7px;
+                    border-radius: 10px;
+                  }
+                }
+              `,
+            )}
           >
-            <Tag color="blue">
-              {variableText.map((item, index) => {
-                return (
-                  <React.Fragment key={item}>
-                    {index ? ' / ' : ''}
-                    {item}
-                  </React.Fragment>
-                );
-              })}
-            </Tag>
-          </div>
-          {!disabled ? (
-            <span
+            <div
               role="button"
-              aria-label="icon-close"
-              className={cx('clear-button')}
-              // eslint-disable-next-line react/no-unknown-property
-              unselectable="on"
-              onClick={onClearVariable}
+              aria-label="variable-tag"
+              style={{ overflow: 'hidden' }}
+              className={cx('ant-input ant-input-outlined', { 'ant-input-disabled': disabled }, hashId)}
             >
-              <CloseCircleFilled />
-            </span>
-          ) : null}
-        </div>
-      ) : (
-        <div style={{ flex: 1 }}>
-          {children && (isFieldValue || !nullable) ? (
-            children
-          ) : ConstantComponent ? (
-            <ConstantComponent
-              role="button"
-              aria-label="variable-constant"
-              {...constantComponentProps}
-              value={value}
-              onChange={onChange}
-            />
-          ) : null}
-        </div>
-      )}
-      {hideVariableButton ? null : (
-        <Cascader
-          options={options}
-          value={variable ?? cValue}
-          onChange={onSwitch}
-          loadData={loadData as any}
-          changeOnSelect={changeOnSelect}
-          fieldNames={fieldNames}
-          disabled={disabled}
-        >
-          {button ?? (
-            <XButton
-              className={css(`
+              <Tag color="blue">
+                {variableText.map((item, index) => {
+                  return (
+                    <React.Fragment key={item}>
+                      {index ? ' / ' : ''}
+                      {item}
+                    </React.Fragment>
+                  );
+                })}
+              </Tag>
+            </div>
+            {!disabled ? (
+              <span
+                role="button"
+                aria-label="icon-close"
+                className={cx('clear-button')}
+                // eslint-disable-next-line react/no-unknown-property
+                unselectable="on"
+                onClick={onClearVariable}
+              >
+                <CloseCircleFilled />
+              </span>
+            ) : null}
+          </div>
+        ) : (
+          <div style={{ flex: 1 }}>
+            {children && (isFieldValue || !nullable) ? (
+              children
+            ) : ConstantComponent ? (
+              <ConstantComponent
+                role="button"
+                aria-label="variable-constant"
+                {...constantComponentProps}
+                value={value}
+                onChange={onChange}
+              />
+            ) : null}
+          </div>
+        )}
+        {hideVariableButton ? null : (
+          <Cascader
+            options={options}
+            value={variable ?? cValue}
+            onChange={onSwitch}
+            loadData={loadData as any}
+            changeOnSelect={changeOnSelect}
+            fieldNames={fieldNames}
+            disabled={disabled}
+          >
+            {button ?? (
+              <XButton
+                className={css(`
               margin-left: -1px;
             `)}
-              type={variable ? 'primary' : 'default'}
-              disabled={disabled}
-            />
-          )}
-        </Cascader>
-      )}
-    </Space.Compact>,
+                type={variable ? 'primary' : 'default'}
+                disabled={disabled}
+              />
+            )}
+          </Cascader>
+        )}
+      </Space.Compact>
+      {/* 确保所有ant input样式都已加载, 放到Compact中会导致Compact中的Input样式不对 */}
+      <AntInput style={{ display: 'none' }} />
+    </>,
   );
 }
diff --git a/packages/core/client/src/schema-component/antd/variable/TextArea.tsx b/packages/core/client/src/schema-component/antd/variable/TextArea.tsx
index 1a43e849b4..8669c8a3b6 100644
--- a/packages/core/client/src/schema-component/antd/variable/TextArea.tsx
+++ b/packages/core/client/src/schema-component/antd/variable/TextArea.tsx
@@ -9,7 +9,7 @@
 
 import { css, cx } from '@emotion/css';
 import { useForm } from '@formily/react';
-import { Space, theme } from 'antd';
+import { Input as AntInput, Space, theme } from 'antd';
 import type { CascaderProps, DefaultOptionType } from 'antd/lib/cascader';
 import useInputStyle from 'antd/es/input/style';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
@@ -422,95 +422,99 @@ export function TextArea(props: TextAreaProps) {
   );
   const disabled = props.disabled || form.disabled;
   return wrapSSR(
-    <Space.Compact
-      className={cx(
-        componentCls,
-        hashId,
-        css`
-          display: flex;
-          .ant-input {
-            flex-grow: 1;
-            min-width: 200px;
-            word-break: break-all;
-            border-top-left-radius: ${addonBefore ? '0px' : '6px'};
-            border-bottom-left-radius: ${addonBefore ? '0px' : '6px'};
-          }
-          .ant-input-disabled {
-            .ant-tag {
-              color: #bfbfbf;
-              border-color: #d9d9d9;
-            }
-          }
-
-          > .x-button {
-            height: min-content;
-          }
-        `,
-      )}
-    >
-      {addonBefore && (
-        <div
-          className={css`
-            background: rgba(0, 0, 0, 0.02);
-            border: 1px solid rgb(217, 217, 217);
-            padding: 0px 11px;
-            border-radius: 6px 0px 0px 6px;
-            border-right: 0px;
-          `}
-        >
-          {addonBefore}
-        </div>
-      )}
-      <div
-        role="button"
-        aria-label="textbox"
-        onInput={onInput}
-        onBlur={onBlur}
-        onKeyDown={onKeyDown}
-        onPaste={onPaste}
-        onCompositionStart={onCompositionStart}
-        onCompositionEnd={onCompositionEnd}
-        // should use data-placeholder here, but not sure if it is safe to make the change, so add ignore here
-        // @ts-ignore
-        placeholder={props.placeholder}
-        style={style}
+    <>
+      <Space.Compact
         className={cx(
+          componentCls,
           hashId,
-          'ant-input ant-input-outlined',
-          { 'ant-input-disabled': disabled },
-          // NOTE: `pre-wrap` here for avoid the `&nbsp;` (\x160) issue when paste content, we need normal space (\x32).
           css`
-            min-height: ${token.controlHeight}px;
-            overflow: auto;
-            white-space: pre-wrap;
-
-            &[placeholder]:empty::before {
-              content: attr(placeholder);
-              color: #ccc;
+            display: flex;
+            .ant-input {
+              flex-grow: 1;
+              min-width: 200px;
+              word-break: break-all;
+              border-top-left-radius: ${addonBefore ? '0px' : '6px'};
+              border-bottom-left-radius: ${addonBefore ? '0px' : '6px'};
+            }
+            .ant-input-disabled {
+              .ant-tag {
+                color: #bfbfbf;
+                border-color: #d9d9d9;
+              }
             }
 
-            .ant-tag {
-              display: inline;
-              line-height: 19px;
-              margin: 0 0.5em;
-              padding: 2px 7px;
-              border-radius: 10px;
+            > .x-button {
+              height: min-content;
             }
           `,
         )}
-        ref={inputRef}
-        contentEditable={!disabled}
-        dangerouslySetInnerHTML={{ __html: html }}
-      />
-      <VariableSelect
-        options={options}
-        setOptions={setOptions}
-        onInsert={onInsert}
-        changeOnSelect={changeOnSelect}
-        fieldNames={fieldNames || defaultFieldNames}
-        disabled={disabled}
-      />
-    </Space.Compact>,
+      >
+        {addonBefore && (
+          <div
+            className={css`
+              background: rgba(0, 0, 0, 0.02);
+              border: 1px solid rgb(217, 217, 217);
+              padding: 0px 11px;
+              border-radius: 6px 0px 0px 6px;
+              border-right: 0px;
+            `}
+          >
+            {addonBefore}
+          </div>
+        )}
+        <div
+          role="button"
+          aria-label="textbox"
+          onInput={onInput}
+          onBlur={onBlur}
+          onKeyDown={onKeyDown}
+          onPaste={onPaste}
+          onCompositionStart={onCompositionStart}
+          onCompositionEnd={onCompositionEnd}
+          // should use data-placeholder here, but not sure if it is safe to make the change, so add ignore here
+          // @ts-ignore
+          placeholder={props.placeholder}
+          style={style}
+          className={cx(
+            hashId,
+            'ant-input ant-input-outlined',
+            { 'ant-input-disabled': disabled },
+            // NOTE: `pre-wrap` here for avoid the `&nbsp;` (\x160) issue when paste content, we need normal space (\x32).
+            css`
+              min-height: ${token.controlHeight}px;
+              overflow: auto;
+              white-space: pre-wrap;
+
+              &[placeholder]:empty::before {
+                content: attr(placeholder);
+                color: #ccc;
+              }
+
+              .ant-tag {
+                display: inline;
+                line-height: 19px;
+                margin: 0 0.5em;
+                padding: 2px 7px;
+                border-radius: 10px;
+              }
+            `,
+          )}
+          ref={inputRef}
+          contentEditable={!disabled}
+          dangerouslySetInnerHTML={{ __html: html }}
+        />
+        <VariableSelect
+          options={options}
+          setOptions={setOptions}
+          onInsert={onInsert}
+          changeOnSelect={changeOnSelect}
+          fieldNames={fieldNames || defaultFieldNames}
+          disabled={disabled}
+        />
+      </Space.Compact>
+      {/* 确保所有ant input样式都已加载, 放到Compact中会导致Compact中的Input样式不对 */}
+      <AntInput style={{ display: 'none' }} />
+    </>,
   );
 }