在 Iframe 中使用 Chakra UI
在 Iframe 中安装和使用 Chakra UI 的指南
Iframe 对于在独立上下文中隔离样式和逻辑非常有用。例如，你可能想在专门的沙盒中展示 Chakra 组件。
模板
使用以下模板快速开始
安装
所需的最低 Node 版本为 Node.20.x
1
安装依赖
npm i @chakra-ui/react @emotion/react @emotion/cache react-frame-component使用的额外包有
react-frame-component用于轻松创建 iframe@emotion/cache用于为样式创建自定义插入点
2
3
更新 tsconfig
如果你正在使用 TypeScript，需要更新 tsconfig 文件中的 compilerOptions 以包含以下选项
{
"compilerOptions": {
"module": "ESNext",
"moduleResolution": "Bundler",
"skipLibCheck": true,
"paths": {
"@/*": ["./src/*"]
}
}
}4
设置 Iframe
创建一个 components/ui/iframe-provider.tsx 文件，使用 react-frame-component 包来设置 iframe。
components/ui/iframe-provider.tsx
import {
ChakraProvider,
EnvironmentProvider,
defaultSystem,
} from "@chakra-ui/react"
import createCache from "@emotion/cache"
import { CacheProvider } from "@emotion/react"
import Iframe, { FrameContextConsumer } from "react-frame-component"
function memoize<T extends object, R>(func: (arg: T) => R): (arg: T) => R {
const cache = new WeakMap<T, R>()
return (arg: T) => {
if (cache.has(arg)) return cache.get(arg)!
const ret = func(arg)
cache.set(arg, ret)
return ret
}
}
const createCacheFn = memoize((container: HTMLElement) =>
createCache({ container, key: "frame" }),
)
export const IframeProvider = (props: React.PropsWithChildren) => {
const { children } = props
return (
<Iframe>
<FrameContextConsumer>
{(frame) => {
const head = frame.document?.head
if (!head) return null
return (
<CacheProvider value={createCacheFn(head)}>
<EnvironmentProvider value={() => head.ownerDocument}>
<ChakraProvider value={defaultSystem}>
{children}
</ChakraProvider>
</EnvironmentProvider>
</CacheProvider>
)
}}
</FrameContextConsumer>
</Iframe>
)
}5
设置 Provider
在应用程序的根目录，使用 components/ui/provider 组件中生成的 Provider 组件包裹你的应用程序。
此 Provider 包含以下内容
- 来自
@chakra-ui/react的ChakraProvider，用于样式系统 - 来自
next-themes的ThemeProvider，用于颜色模式
import { Provider } from "@/components/ui/provider"
import React from "react"
import ReactDOM from "react-dom/client"
import App from "./App"
ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode>
<Provider>
<App />
</Provider>
</React.StrictMode>,
)6
使用 IframeProvider
在应用程序中的任何组件，使用 IframeProvider 组件包裹它，以便在 iframe 中渲染。
src/App.tsx
import { Button, Container, Heading, Stack } from "@chakra-ui/react"
import { IframeProvider } from "./components/ui/iframe-provider"
function App() {
return (
<Container py="8">
<Heading mb="5">Outside Iframe</Heading>
<IframeProvider>
<Stack p="6" align="flex-start" border="1px solid red">
<Heading>Inside Iframe</Heading>
<Button>Click me</Button>
</Stack>
</IframeProvider>
</Container>
)
}
export default App自定义
如果你使用 createSystem 函数创建了自定义主题，请确保将其传递给 IframeProvider 和 Provider 组件，以确保在 iframe 中使用它。
例如，假设你创建了一个自定义主题
export const system = createSystem(defaultConfig, {
theme: { colors: {} },
})然后，将其传递给 IframeProvider 和 Provider 组件
<ChakraProvider value={system}>{/* ... */}</ChakraProvider>