使用Chakra UI设置MDX文件的样式

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion

import { ChakraProvider } from "@chakra-ui/react";

function App() {
  return (
    <ChakraProvider>
      {/* 应用程序的其他组件 */}
    </ChakraProvider>
  );
}

import { Box, Heading, Text } from "@chakra-ui/react";

# Hello, Chakra UI!

<Box p={4} borderWidth="1px" borderRadius="md">
  <Heading size="lg" mb={2}>Welcome to Chakra UI</Heading>
  <Text fontSize="xl">Chakra UI is a great UI library for React.</Text>
</Box>

import { MDXProvider } from "@mdx-js/react";
import { MDXRenderer } from "gatsby-plugin-mdx";
import mdxContent from "./path/to/mdx/file.mdx";

function App() {
  return (
    <ChakraProvider>
      <MDXProvider components={components}>
        <MDXRenderer>{mdxContent}</MDXRenderer>
      </MDXProvider>
    </ChakraProvider>
  );
}