✨ feat: 默认隔离 demo 与文档站点的主题样式

example/.dumirc.ts

@@ -5,6 +5,7 @@ import { homepage, name } from '../package.json';
 
 import { features } from './config/features';
 
+const isProd = process.env.NODE_ENV === 'production';
 export default defineConfig({
   themeConfig: {
     name: 'Ant Design Style Dumi Theme',
@@ -69,5 +70,6 @@ export default defineConfig({
   codeSplitting: {
     jsStrategy: 'granularChunks',
   },
-  ssr: {},
+  // @ts-ignore
+  ssr: isProd ? {} : false,
 });

example/docs/demos/Antd.tsx

@@ -0,0 +1,22 @@
+/**
+ * title: 默认的 antd 组件
+ * description: 默认情况下， Demo 与文档站的主题互相隔离
+ * compact: true
+ */
+import { Alert, Button, theme } from 'antd';
+import { Flexbox } from 'react-layout-kit';
+
+export default () => {
+  const { token } = theme.useToken();
+  return (
+    <Flexbox gap={8} padding={24} style={{ background: token.colorBgLayout }}>
+      <Flexbox horizontal gap={8}>
+        <Button type={'primary'}>按钮</Button>
+        <Button>按钮</Button>
+      </Flexbox>
+
+      <Alert showIcon banner type={'success'} message={'成功的通知'}></Alert>
+      <Alert showIcon banner type={'error'} message={'失败信息'}></Alert>
+    </Flexbox>
+  );
+};

example/docs/demos/AntdInherit.tsx

@@ -0,0 +1,10 @@
+/**
+ * title: 继承站点主题的 antd 组件
+ * description: "添加 `inherit: true`，可以让 Demo 继承文档站主题"
+ * compact: true
+ * inherit: true
+ */
+
+import Antd from './Antd';
+
+export default Antd;

example/docs/guide/demo.zh-CN.md

@@ -0,0 +1,14 @@
+---
+title: Demo 研发
+order: 6
+group: 特性
+demo:
+  cols: 2
+---
+
+## Demo 研发
+
+该主题默认会保证 antd 的默认主题样式，如果需要 demo 集成文档站的主题，可以通过对文档配置 `inherit: true` 属性来指定。
+
+<code src="../demos/Antd.tsx"></code>
+<code src="../demos/AntdInherit.tsx"></code>

src/builtins/Previewer/index.tsx

@@ -2,6 +2,7 @@ import { createStyles } from 'antd-style';
 import { IPreviewerProps } from 'dumi/dist/client/theme-api/types';
 import Previewer from 'dumi/theme-default/builtins/Previewer';
 import { rgba } from 'polished';
+import DemoProvider from '../../components/DemoProvider';
 
 const useStyles = createStyles(
   ({ css, token, prefixCls }) => css`
@@ -52,7 +53,9 @@ export default (props: IPreviewerProps) => {
 
   return (
     <div className={styles}>
-      <Previewer {...props} />
+      <DemoProvider inherit={props.inherit}>
+        <Previewer {...props} />
+      </DemoProvider>
     </div>
   );
 };

src/components/DemoProvider/index.tsx

@@ -0,0 +1,15 @@
+import { ConfigProvider } from 'antd';
+import type { FC, PropsWithChildren } from 'react';
+
+interface DemoProviderProps extends PropsWithChildren {
+  inherit?: boolean;
+}
+const DemoProvider: FC<DemoProviderProps> = ({ children, inherit = false }) => {
+  return (
+    <ConfigProvider prefixCls={inherit ? 'ant' : undefined} theme={{ inherit }}>
+      {children}
+    </ConfigProvider>
+  );
+};
+
+export default DemoProvider;

src/layouts/DemoLayout/index.tsx

@@ -0,0 +1,8 @@
+import { useOutlet } from 'dumi';
+import DemoProvider from '../../components/DemoProvider';
+
+export default () => {
+  const outlet = useOutlet();
+
+  return <DemoProvider>{outlet}</DemoProvider>;
+};