我有一个使用 Tailwind 构建的应用程序，用于渲染和操作 Chakra UI 组件，以便使用 iframe 进行隔离测试。我这样做是为了让 tailwind CSS 不会影响 chakra ui 组件样式。
我尝试使用 React-frame-Component 来渲染包裹在 Chakra 提供程序中的组件，但这不起作用。
'use client';
import Frame from 'react-frame-component';
import { Provider } from "@/components/ui/provider"
import {useEffect, useState} from "react";
import {Text} from "@chakra-ui/react";
import {Button} from "@/components/ui/button";
export default function Preview() {
return (
<>
<Frame
className="h-80 w-80"
initialContent={`
<!DOCTYPE html>
<html>
<head>
<style>
body { margin: 0; padding: 0; box-sizing: border-box; }
</style>
</head>
<body>
<div class="frame-root"></div>
</body>
</html>
`}
>
<div>
<Provider>
<Text textStyle="2xl">My Large Heading</Text>
<Button>My Chakra Button</Button>
</Provider>
</div>
</Frame>
</>
);
}您面临的问题
react-frame-componentProviderCSSResetFrameContextConsumerreact-frame-componentdocumentwindowProvider'use client';
import Frame, { FrameContextConsumer } from 'react-frame-component';
import { ChakraProvider, Text, extendTheme } from '@chakra-ui/react';
import { Button } from '@/components/ui/button';
export default function Preview() {
// Optionally customize the theme
const theme = extendTheme({
textStyles: {
'2xl': {
fontSize: '2xl',
fontWeight: 'bold',
},
},
});
return (
<Frame
className="h-80 w-80"
initialContent={`
<!DOCTYPE html>
<html>
<head>
<style>
body { margin: 0; padding: 0; box-sizing: border-box; }
</style>
</head>
<body>
<div class="frame-root"></div>
</body>
</html>
`}
>
<FrameContextConsumer>
{({ document }) => (
// Render the ChakraProvider and components inside the iframe
<ChakraProvider theme={theme}>
<div>
<Text textStyle="2xl">My Large Heading</Text>
<Button>My Chakra Button</Button>
</div>
</ChakraProvider>
)}
</FrameContextConsumer>
</Frame>
);
}
FrameContextConsumerdocumentwindowChakraProvider