openxiangda 1.0.35 → 1.0.36

package/README.md

@@ -81,6 +81,8 @@ Use `openxiangda skill install --dest <skills-dir>` to target a different Codex
 
 Create a new publishable app workspace with `openxiangda workspace init <dir>`. The command writes a minimal `sy-lowcode-app-workspace` template with React, Ant Design, the single `openxiangda` package, and the required `publish:all` / `openxiangda:publish` scripts. Use `--install` to run `pnpm install` immediately, or run it manually after creation.
 
+New OpenXiangda code pages and form custom pages publish with `cssIsolation: "none"` by default, so Tailwind utilities and normal Ant Design styles apply without a `.sy-app-workspace` prefix. Explicit `namespace` and `shadow` settings are kept only for legacy compatibility.
+
 Local workspace state is authoritative. If the current folder has no `.openxiangda/state.json` app binding, create a new app instead of searching the platform for a similar app name:
 
 ```bash

package/lib/cli.js

@@ -1482,7 +1482,7 @@ async function page(args) {
             jsUrls: splitList(flags['js-urls']),
             framework: flags.framework || 'react',
             frameworkVersion: flags['framework-version'] || '',
-            cssIsolation: flags['css-isolation'] || 'namespace',
+            cssIsolation: flags['css-isolation'] || 'none',
             format: flags.format || 'esm',
           },
           menu: flags.menu

package/openxiangda-skills/SKILL.md

@@ -153,7 +153,7 @@ Workflow / automation / permissions:
 Platform domain knowledge (read these first when generating forms or pages so the output matches the live platform behavior):
 
 - `references/platform-data-model.md` — how the platform persists field values (JSONB, `{label, value}` for option fields, attachment shape, etc.). Use this whenever you write, render, or diagnose form data.
-- `references/style-system.md` — three-layer style architecture, CSS namespace, and flexible Tailwind/CSS guidance. Use this before writing substantial page or form CSS.
+- `references/style-system.md` — style isolation defaults, legacy namespace compatibility, and flexible Tailwind/CSS guidance. Use this before writing substantial page or form CSS.
 - `references/architecture-patterns.md` — CRUD data flow, `DataManagementList` pattern, recommended directory layout for `src/pages` and `src/forms`. Use this before scaffolding a new page or list view.
 - `references/best-practices.md` — read this before implementing app-level business patterns; it points to `examples/best-practices/` and explains when to use status fields instead of workflow.
 - `references/component-guide.md` — when to pick platform components vs. raw Ant Design vs. custom components, with the rules for option fields. Use this before introducing a new component.

package/openxiangda-skills/references/component-guide.md

@@ -102,19 +102,18 @@ export function CustomSelect({ options, className, ...rest }: CustomSelectProps)
   return (
     <Select
       className={clsx('w-full rounded-md', className)}
-      popupClassName="sy-app-workspace"
-      getPopupContainer={(trigger) => trigger.parentElement ?? document.body}
-      options={options}
-      {...rest}
+      getPopupContainer={(trigger) => trigger.parentElement ?? document.body}
+      options={options}
+      {...rest}
     />
   );
 }
 ```
 
-要点：
-- 透传 `...rest`，保留 antd 全部 API。
-- `popupClassName="sy-app-workspace"` 确保弹层应用平台样式作用域。
-- `getPopupContainer` 解决弹层被裁切问题（详见第 7 节常见错误）。
+要点：
+- 透传 `...rest`，保留 antd 全部 API。
+- `getPopupContainer` 解决弹层被裁切问题（详见第 7 节常见错误）。
+- 默认 `cssIsolation: "none"` 时不要额外给弹层加 `sy-app-workspace`；只有 legacy `namespace/shadow` 页面才需要给弹层或容器补 namespace class。
 - 使用 `w-full`、`rounded-md`、`text-slate-600`、`border-slate-200` 等 Tailwind 原生类作为默认基线；如果组件视觉需要精调，可以继续使用 Tailwind 任意值或局部 CSS。
 
 ### 4.2 错误：从头实现选择器
@@ -171,7 +170,7 @@ function BadSelect({ options }) {
    </ConfigProvider>
    ```
 
-4. **谨慎**：直接覆盖组件内部 class（`.ant-select-selector { ... }`）属于私有 API，升级风险较高。确实需要时必须限定在页面根类或 `.sy-app-workspace` 下，并优先考虑 `ConfigProvider`、`className`、组件 props 或 CSS 变量是否能解决。
+4. **谨慎**：直接覆盖组件内部 class（`.ant-select-selector { ... }`）属于私有 API，升级风险较高。确实需要时必须限定在页面根类下；legacy 页面也可以兼容限定在 `.sy-app-workspace` 下。优先考虑 `ConfigProvider`、`className`、组件 props 或 CSS 变量是否能解决。
 
 ---
 
@@ -208,7 +207,7 @@ export function ActionButton(props) {
 | 用第三方富文本（TinyMCE 等） | 用 `EditorField` |
 | 自己写列表 + 分页 + 导出 | 用 `DataManagementList` |
 | 常规组件大量写 `style={{ color: '#333', padding: 16 }}` | 优先 Tailwind 原生工具类、任意值或局部 CSS；动态值和少量精调 inline style 可接受 |
-| Select / Date / Modal 弹层错位、被滚动容器裁切 | 加 `getPopupContainer={(trigger) => trigger.parentElement}`，并在弹层 `popupClassName` 上加 `sy-app-workspace` |
+| Select / Date / Modal 弹层错位、被滚动容器裁切 | 默认加 `getPopupContainer={(trigger) => trigger.parentElement}`；legacy `namespace/shadow` 页面才额外使用 `sy-app-workspace` |
 | 不分端，PC 组件直接放移动端 | 按端拆页 + 端内用对应 UI 库 |
 | 无作用域覆盖 `.ant-xxx` 内部 class | 优先用 `className`、CSS 变量或 `ConfigProvider` 主题；必要覆盖时限定到页面命名空间 |
 | 在自定义组件中不透传 `...rest` / `ref` | 透传 props 与 `forwardRef`，保留底层组件全部能力 |
@@ -220,5 +219,5 @@ export function ActionButton(props) {
 - [ ] 涉及人员 / 部门 / 文件 / 图片 / 富文本 / 签名 / 地图 / 列表 → 用了平台组件？
 - [ ] 自定义组件 → 基于 antd / antd-mobile 包装并透传 props？
 - [ ] 样式 → 默认用 Tailwind 原生类 / 任意值 / 局部 CSS；平台 token 只在主题兼容或平台组件需要时使用，且作用域收敛？
-- [ ] 弹层 → 设置了 `getPopupContainer` 与 `sy-app-workspace` 弹层样式作用域？
+- [ ] 弹层 → 默认使用正常容器；只有 legacy 隔离页面才额外设置 `sy-app-workspace` 样式作用域？
 - [ ] 多端 → PC 用 antd、Mobile 用 antd-mobile，业务逻辑共享？

package/openxiangda-skills/references/style-system.md

@@ -9,8 +9,9 @@
 1. **业务页面默认写原生 Tailwind**：优先使用 `bg-white`、`border`、`border-slate-200`、`text-slate-600`、`shadow-sm`、`rounded-lg`、`p-4`、`gap-4`、`grid-cols-[240px_1fr]` 这类 Tailwind 原生类和任意值。
 2. **不要强制平台 token**：不要把 `bg-container`、`text-secondary`、`rounded-form`、`shadow-card` 当默认示例或默认范式。历史项目或平台组件需要时可以兼容使用，但新业务页面不推荐主动依赖。
 3. **不要直接套 shadcn token**：`bg-card`、`text-muted-foreground`、`text-foreground`、`bg-background` 等不是 Tailwind 原生类。除非项目已经在 `tailwind.config.cjs` 明确配置这些 token，否则必须改成 Tailwind 原生类或任意值。
-4. **保留 OpenXiangda 隔离能力**：Tailwind 仍通过 `.sy-app-workspace` namespace 输出，workspace 仍扫描 `openxiangda` 包内容，平台组件 safelist 仍保留。
-5. **CSS 作用域要收敛**：页面级 CSS 写在 `styles.css`，选择器限定在 `.sy-app-workspace` 或页面根类下，避免污染宿主平台。
+4. **默认不启用样式隔离**：新发布页面默认 `cssIsolation: "none"`，Tailwind 类按原样输出，不需要 `.sy-app-workspace` 前缀即可生效。
+5. **legacy 隔离仅用于兼容**：历史页面或显式配置 `cssIsolation: "namespace" | "shadow"` 时，runtime 仍会保留 `.sy-app-workspace`、legacy portal 和旧样式前缀。
+6. **CSS 作用域要收敛**：页面级 CSS 写在 `styles.css`，选择器优先限定在页面根类下，避免无意覆盖宿主平台或其他页面。
 
 ---
 
@@ -60,12 +61,12 @@ export function DashboardPage() {
 ### 2.4 局部 CSS
 
 ```css
-.sy-app-workspace .queue-booking-page {
+.queue-booking-page {
   min-height: 100%;
   background: #f8fafc;
 }
 
-.sy-app-workspace .queue-booking-page__calendar-grid {
+.queue-booking-page .queue-booking-page__calendar-grid {
   display: grid;
   grid-template-columns: repeat(7, minmax(120px, 1fr));
   gap: 12px;
@@ -113,11 +114,11 @@ module.exports = {
 
 这个配置的作用：
 
-- `openxiangdaPreset` 保留 `.sy-app-workspace` namespace、平台组件 safelist 和平台组件需要的工具类。
+- `openxiangdaPreset` 保留平台组件 safelist、平台 token 兼容类和平台组件需要的工具类；不再强制 Tailwind 输出 `.sy-app-workspace` 前缀。
 - `...openxiangdaContent` 确保平台组件内部 class 会被 Tailwind 扫描到。
 - `blocklist` 避免 Tailwind 误生成日期字符串相关的异常类。
 
-不要为了“更自由”移除这些平台构建能力；自由写 Tailwind 原生类和保留构建隔离能力并不冲突。
+不要移除这些平台构建能力；自由写 Tailwind 原生类和保留平台组件兼容能力并不冲突。
 
 ---
 
@@ -160,21 +161,15 @@ body {
 
 ## 5. Ant Design 和弹层
 
-PC 控件优先用 `antd`，移动端控件优先用 `antd-mobile`。弹层必须挂到当前页面容器或 `.sy-app-workspace` 内，避免宿主平台污染或滚动容器裁切：
+PC 控件优先用 `antd`，移动端控件优先用 `antd-mobile`。默认 `cssIsolation: "none"` 时使用 Ant Design 默认 `ant` class 和 `document.body` 弹层容器即可；只有 legacy `namespace/shadow` 页面才需要显式挂到当前隔离容器：
 
 ```tsx
-<ConfigProvider
-  getPopupContainer={(trigger) =>
-    trigger?.closest('.sy-app-workspace') ??
-    (document.querySelector('.sy-app-workspace') as HTMLElement) ??
-    document.body
-  }
->
+<ConfigProvider>
   <App />
 </ConfigProvider>
 ```
 
-局部组件也可以使用 `getPopupContainer={(trigger) => trigger.parentElement ?? document.body}`。不要无作用域覆盖 `.ant-select-selector`、`.ant-modal` 等私有 class；确实需要覆盖时限定在页面根类下。
+legacy 页面可使用 `getPopupContainer={(trigger) => trigger?.closest(".sy-app-workspace") ?? document.body}`。不要无作用域覆盖 `.ant-select-selector`、`.ant-modal` 等私有 class；确实需要覆盖时限定在页面根类下。
 
 ---
 
@@ -188,9 +183,10 @@ OpenXiangda 仍保留部分平台语义类和 CSS 变量，主要用于：
 
 常见兼容类包括 `text-primary`、`text-secondary`、`bg-container`、`bg-layout`、`border-secondary`、`rounded-form`、`shadow-card` 等。AI 编写新业务页面时不要默认使用这些类；除非用户明确要求跟随平台变量主题，或当前项目已有一致的 token 体系。
 
-如果需要统一主题，推荐把主题限制在 `.sy-app-workspace` 或应用根类下：
+如果需要统一主题，推荐把主题限制在应用根类下；兼容旧页面时也可以同时声明 `.sy-app-workspace`：
 
 ```css
+.theme-brand,
 .sy-app-workspace.theme-brand {
   --sy-color-primary: #0f766e;
   --sy-radius-md: 8px;
@@ -218,5 +214,5 @@ warning 不会阻断构建，但它通常意味着页面会出现“颜色、边
 - [ ] 页面样式默认使用 Tailwind 原生类和任意值，而不是平台 token 类？
 - [ ] 没有使用未配置的 shadcn token 类，例如 `bg-card`、`text-muted-foreground`、`text-foreground`？
 - [ ] `tailwind.config.cjs` 保留 OpenXiangda preset、content 扫描和 blocklist？
-- [ ] 业务 CSS 限定在 `.sy-app-workspace` 或页面根类下？
-- [ ] antd / antd-mobile 弹层设置了合适的挂载容器？
+- [ ] 业务 CSS 限定在页面根类下，而不是全局裸覆盖？
+- [ ] 只有 legacy `namespace/shadow` 页面才额外配置 `.sy-app-workspace` 弹层容器？

package/openxiangda-skills/references/troubleshooting.md

@@ -23,18 +23,18 @@
 
 **症状**：Select / Dropdown / Popup / Modal 等组件的弹出层没有样式，直接跑到屏幕外，或呈现为无样式的裸 HTML。
 
-**根因**：当页面启用了 Shadow DOM 样式隔离（`cssIsolation: "shadow"`）时，antd 组件的弹出层默认会渲染到 `document.body`，从而脱离 Shadow DOM 的样式作用域；即使未使用 Shadow DOM，如果没有正确配置弹层容器，antd-mobile 的 Popup 也可能因 namespace 未被继承而失去样式。
-
-**解决方案**：
-1. 推荐使用 CSS Namespace 隔离（`cssIsolation: "namespace"`）替代 Shadow DOM。
-2. 为 antd `ConfigProvider` 配置 `getPopupContainer` 指向页面根容器。
-3. 对于 antd-mobile，确保 `Popup` / `Modal` 的 `getContainer` 指向正确容器。
-4. 确保弹层的 `className` 中包含 namespace class（如 `sy-app-workspace`）。
-
-**示例**：
-```tsx
-import { useRef } from 'react';
-import { ConfigProvider } from 'antd';
+**根因**：新页面默认 `cssIsolation: "none"`，弹层使用 `document.body` 和默认 Ant Design 样式即可。只有历史页面显式启用 `cssIsolation: "namespace" | "shadow"` 时，弹层渲染到 `document.body` 才可能脱离 legacy 样式作用域；移动端 Popup 也可能因 namespace 未被继承而失去样式。
+
+**解决方案**：
+1. 新页面优先保持 `cssIsolation: "none"`，不要为了修弹层问题手动加 `.sy-app-workspace`。
+2. legacy `shadow` 页面优先迁移为 `none`；无法迁移时可使用 `namespace` 兼容模式。
+3. legacy 页面为 antd `ConfigProvider` 配置 `getPopupContainer` 指向页面根容器。
+4. 对于 legacy antd-mobile 页面，确保 `Popup` / `Modal` 的 `getContainer` 指向正确容器，并按需补 namespace class。
+
+**legacy 示例**：
+```tsx
+import { useRef } from 'react';
+import { ConfigProvider } from 'antd';
 
 const rootRef = useRef<HTMLDivElement>(null);
 
@@ -188,7 +188,7 @@ export default defineConfig({
 **解决方案**：
 1. 在 `vite.config.ts` 的 `optimizeDeps.include` 中显式添加 `antd-mobile`，避免运行时多次预构建。
 2. 调整 Tailwind preflight 策略，确保不会覆盖 antd-mobile 的基础样式（必要时关闭 preflight 或使用 `important` 选择器）。
-3. 确保 antd-mobile 组件渲染在 `sy-app-workspace` namespace 容器内，弹层 `getContainer` 指向该容器。
+3. 仅 legacy `namespace/shadow` 页面需要确保 antd-mobile 组件渲染在 `sy-app-workspace` namespace 容器内，弹层 `getContainer` 指向该容器；新页面默认不需要。
 
 **示例**：
 ```typescript

package/openxiangda-skills/skills/openxiangda-page/SKILL.md

@@ -60,7 +60,7 @@ Read these references only when editing page code:
 - `../../references/pages/page-sdk.md`
 - `../../references/notifications.md` — notification resources and `sdk.notification` usage. Read before adding reminders, alerts, or message templates to a page.
 - `../../references/pages/publish-flow.md`
-- `../../references/style-system.md` — three-layer style architecture, CSS namespace, and flexible Tailwind/CSS guidance. Read before writing substantial page CSS or Tailwind classes.
+- `../../references/style-system.md` — style isolation defaults, Tailwind/CSS guidance, and legacy namespace compatibility. Read before writing substantial page CSS or Tailwind classes.
 - `../../references/architecture-patterns.md` — CRUD data flow, `DataManagementList` pattern, and recommended `src/pages/<pageCode>/` layout. Read before scaffolding a new page or list view.
 - `../../references/component-guide.md` — when to pick platform components, raw Ant Design, or custom components. Read before introducing a new component.
 - `../../references/troubleshooting.md` — known failure modes (missing styles, `options` runtime errors, broken option rendering, etc.) and their fixes. Read when something does not behave as expected.
@@ -83,7 +83,7 @@ Read these references only when editing page code:
 - Do not scatter hardcoded `/view/...&isRenderNav=false` URLs through page code. Use the runtime navigation API or the local route helper generated for the app shell.
 - Platform menus should bind only the formal app-shell code page for user-facing entry points. Original forms, workflows, and native view pages may remain as development / maintenance resources or permission targets, but should not become the product navigation shell.
 - For prod, explicitly run with `--profile prod`; never rely on the current profile for release operations.
-- Follow the style system in `../../references/style-system.md`: default to native Tailwind utilities and arbitrary values for business pages (`bg-white`, `border`, `border-slate-200`, `text-slate-600`, `grid-cols-[240px_1fr]`, etc.). Keep the page CSS namespace and platform component styles, but do not treat platform token classes as the default authoring pattern. Do not use shadcn token classes such as `bg-card`, `text-muted-foreground`, or `text-foreground` unless the workspace explicitly configures them.
+- Follow the style system in `../../references/style-system.md`: default to native Tailwind utilities and arbitrary values for business pages (`bg-white`, `border`, `border-slate-200`, `text-slate-600`, `grid-cols-[240px_1fr]`, etc.). New pages default to `cssIsolation: "none"` and do not need `.sy-app-workspace`; keep namespace/shadow handling only for legacy pages that explicitly configure it. Do not treat platform token classes as the default authoring pattern, and do not use shadcn token classes such as `bg-card`, `text-muted-foreground`, or `text-foreground` unless the workspace explicitly configures them.
 - For list / detail / CRUD pages, follow `../../references/architecture-patterns.md` (e.g. `DataManagementList`) before writing custom data-fetching loops.
 - Query pages must use pagination with structured conditions. Do not fetch a large `pageSize` and filter in the browser; avoid default `searchKeyWord`, and build multi-field fuzzy search with explicit `filterGroup` + `OR`.
 - Pick components per `../../references/component-guide.md`: prefer the platform component, fall back to Ant Design, and only build a custom component when neither fits.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "openxiangda",
-  "version": "1.0.35",
+  "version": "1.0.36",
   "description": "OpenXiangda CLI, workspace build tools, runtime SDK, and form components.",
   "private": false,
   "bin": {

package/packages/sdk/dist/runtime/index.cjs

@@ -1279,8 +1279,7 @@ var PageProvider = ({
 };
 
 // packages/sdk/src/styles/antd-theme.ts
-var antdTheme = {
-  cssVar: { prefix: "sy-ant" },
+var baseTheme = {
   hashed: false,
   token: {
     colorPrimary: "#1677ff",
@@ -1308,6 +1307,14 @@ var antdTheme = {
     Card: { paddingLG: 24 }
   }
 };
+var antdTheme = {
+  ...baseTheme,
+  cssVar: { prefix: "ant" }
+};
+var legacyAntdTheme = {
+  ...baseTheme,
+  cssVar: { prefix: "sy-ant" }
+};
 
 // packages/sdk/src/runtime/react/createReactPage.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
@@ -1328,6 +1335,21 @@ var MESSAGE_METHODS = [
 var createRuntimeRoot = (el) => {
   return (0, import_client2.createRoot)(el);
 };
+var normalizeCssIsolation = (value) => {
+  if (value === "namespace" || value === "shadow") return value;
+  return "none";
+};
+var usesLegacyCssIsolation = (cssIsolation) => cssIsolation === "namespace" || cssIsolation === "shadow";
+var getRuntimeCssIsolation = (context) => normalizeCssIsolation(context.page?.capabilities?.cssIsolation);
+var getAntdRuntimeOptions = (cssIsolation) => {
+  const legacy = usesLegacyCssIsolation(cssIsolation);
+  return {
+    prefixCls: legacy ? "sy-ant" : "ant",
+    iconPrefixCls: legacy ? "sy-anticon" : "anticon",
+    messagePrefixCls: legacy ? "sy-ant-message" : "ant-message",
+    theme: legacy ? legacyAntdTheme : antdTheme
+  };
+};
 var isShadowRoot = (rootNode) => typeof ShadowRoot !== "undefined" && rootNode instanceof ShadowRoot;
 var getStyleContainer = (el) => {
   const rootNode = el.getRootNode?.();
@@ -1356,14 +1378,19 @@ var getRuntimeOverlayContainer = (el, portalContainer) => {
     getTargetContainer: () => getRuntimeRoot(el)
   };
 };
-var createAntdConfig = (overlayContainer) => ({
-  locale: import_zh_CN.default,
-  prefixCls: "sy-ant",
-  iconPrefixCls: "sy-anticon",
-  theme: antdTheme,
-  getPopupContainer: overlayContainer.getPopupContainer,
-  getTargetContainer: overlayContainer.getTargetContainer
-});
+var createAntdConfig = (overlayContainer, cssIsolation) => {
+  const antdOptions = getAntdRuntimeOptions(cssIsolation);
+  return {
+    locale: import_zh_CN.default,
+    prefixCls: antdOptions.prefixCls,
+    iconPrefixCls: antdOptions.iconPrefixCls,
+    theme: antdOptions.theme,
+    ...usesLegacyCssIsolation(cssIsolation) ? {
+      getPopupContainer: overlayContainer.getPopupContainer,
+      getTargetContainer: overlayContainer.getTargetContainer
+    } : {}
+  };
+};
 var createPortalContainer = (el) => {
   const rootNode = el.getRootNode?.();
   const parent = isShadowRoot(rootNode) ? rootNode : el.ownerDocument?.body || document.body;
@@ -1413,11 +1440,12 @@ var registerAntdMessageApi = (api) => {
     }
   };
 };
-var installRuntimePortalContainer = (el) => {
+var installRuntimePortalContainer = (el, cssIsolation) => {
   const globalScope = globalThis;
-  const portalContainer = createPortalContainer(el);
+  const portalContainer = usesLegacyCssIsolation(cssIsolation) ? createPortalContainer(el) : null;
   const stack = Array.isArray(globalScope[PORTAL_CONTAINER_STACK_GLOBAL]) ? globalScope[PORTAL_CONTAINER_STACK_GLOBAL] : [];
-  stack.push(portalContainer);
+  const stackTarget = portalContainer ?? el.ownerDocument?.body ?? document.body;
+  stack.push(stackTarget);
   globalScope[PORTAL_CONTAINER_STACK_GLOBAL] = stack;
   globalScope[PORTAL_CONTAINER_RESOLVER_GLOBAL] = () => {
     for (let index = stack.length - 1; index >= 0; index -= 1) {
@@ -1431,42 +1459,43 @@ var installRuntimePortalContainer = (el) => {
   return {
     container: portalContainer,
     release: () => {
-      const position = stack.lastIndexOf(portalContainer);
+      const position = stack.lastIndexOf(stackTarget);
       if (position >= 0) {
         stack.splice(position, 1);
       }
-      portalContainer.remove();
+      portalContainer?.remove();
     }
   };
 };
-var installAntdStaticHolder = (el, portalContainer) => {
+var installAntdStaticHolder = (el, portalContainer, cssIsolation) => {
   installAntdMessageProxy();
+  const antdOptions = getAntdRuntimeOptions(cssIsolation);
   const getMessageContainer = () => {
     if (portalContainer?.isConnected) return portalContainer;
-    return getRuntimeRoot(el);
+    return usesLegacyCssIsolation(cssIsolation) ? getRuntimeRoot(el) : document.body;
   };
   import_antd.ConfigProvider.config({
-    prefixCls: "sy-ant",
-    iconPrefixCls: "sy-anticon",
-    theme: antdTheme,
+    prefixCls: antdOptions.prefixCls,
+    iconPrefixCls: antdOptions.iconPrefixCls,
+    theme: antdOptions.theme,
     holderRender: (children) => {
       if (!el.isConnected) {
         return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           import_antd.ConfigProvider,
           {
-            prefixCls: "sy-ant",
-            iconPrefixCls: "sy-anticon",
-            theme: antdTheme,
+            prefixCls: antdOptions.prefixCls,
+            iconPrefixCls: antdOptions.iconPrefixCls,
+            theme: antdOptions.theme,
             children
           }
         );
       }
       const overlayContainer = getRuntimeOverlayContainer(el, portalContainer);
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_cssinjs.StyleProvider, { hashPriority: "high", container: getStyleContainer(el), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_antd.ConfigProvider, { ...createAntdConfig(overlayContainer), children }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_cssinjs.StyleProvider, { hashPriority: "high", container: getStyleContainer(el), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_antd.ConfigProvider, { ...createAntdConfig(overlayContainer, cssIsolation), children }) });
     }
   });
   import_antd.message.config({
-    prefixCls: "sy-ant-message",
+    prefixCls: antdOptions.messagePrefixCls,
     getContainer: getMessageContainer
   });
 };
@@ -1484,20 +1513,27 @@ var createReactPage = (AppComponent) => {
   let currentContainer = null;
   let releasePortalContainer = null;
   let portalContainer = null;
+  let currentCssIsolation = null;
   const render = (el, context) => {
-    el.classList.add(NAMESPACE_ROOT_CLASS);
-    if (!root || currentContainer !== el || !portalContainer?.isConnected) {
+    const cssIsolation = getRuntimeCssIsolation(context);
+    if (usesLegacyCssIsolation(cssIsolation)) {
+      el.classList.add(NAMESPACE_ROOT_CLASS);
+    } else {
+      el.classList.remove(NAMESPACE_ROOT_CLASS);
+    }
+    if (!root || currentContainer !== el || currentCssIsolation !== cssIsolation || usesLegacyCssIsolation(cssIsolation) && !portalContainer?.isConnected) {
       root?.unmount();
       releasePortalContainer?.();
       root = createRuntimeRoot(el);
       currentContainer = el;
-      const portalHandle = installRuntimePortalContainer(el);
+      currentCssIsolation = cssIsolation;
+      const portalHandle = installRuntimePortalContainer(el, cssIsolation);
       portalContainer = portalHandle.container;
       releasePortalContainer = portalHandle.release;
     }
     const overlayContainer = getRuntimeOverlayContainer(el, portalContainer);
-    installAntdStaticHolder(el, portalContainer);
-    const antdConfig = createAntdConfig(overlayContainer);
+    installAntdStaticHolder(el, portalContainer, cssIsolation);
+    const antdConfig = createAntdConfig(overlayContainer, cssIsolation);
     root.render(
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_cssinjs.StyleProvider, { hashPriority: "high", container: getStyleContainer(el), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_antd.ConfigProvider, { ...antdConfig, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_antd.App, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RuntimeMessageBridge, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PageProvider, { context, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AppComponent, {}) }) }) }) }) })
     );
@@ -1516,6 +1552,7 @@ var createReactPage = (AppComponent) => {
       currentContainer = null;
       releasePortalContainer = null;
       portalContainer = null;
+      currentCssIsolation = null;
     }
   };
 };