Chakra UI 对于自己的组件无法正常工作

问题描述

Chakra 在 pages 文件夹中运行良好，但是当尝试在 components 文件夹中使用它时，问题就开始了。

我添加了 ChakraProvider 来识别属性，到目前为止一切顺利，但是 Accordion 不起作用，让手风琴在其自己的组件上工作的正确方法是什么？

我有以下文件夹结构：

资产
组件
- 标题
- 页脚
钩子
页面
服务
样式

"@chakra-ui/react": "^1.3.4","next": "10.0.8","react": "17.0.1",

页面/app.tsx

import { ChakraProvider } from '@chakra-ui/react';
import {AppProps} from 'next/app'
import guiaTheme from '../styles/theme';
import GlobalStyle from '../styles/global'

const MyApp: React.FC<AppProps> = ({ Component,pageProps }) => {
  return(
    <ChakraProvider theme={guiaTheme}>
      <Component {...pageProps} />
      <GlobalStyle/>
    </ChakraProvider>
  )
}

export default MyApp

pages/_document.tsx

import Document,{ Html,Head,Main,NextScript,DocumentinitialProps,DocumentContext } from 'next/document'
import { ServerStyleSheet } from 'styled-components'
import Header from '../components/Header'
import Footer from '../components/Footer'

class MyDocument extends Document {
  static async getinitialProps(ctx: DocumentContext): Promise<DocumentinitialProps> {
    const sheet = new ServerStyleSheet()
    const originalRenderPage = ctx.renderPage

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),})

      const initialProps = await Document.getinitialProps(ctx)
      return {
        ...initialProps,styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),}
    } finally {
      sheet.seal()
    }
  }

  render() {
    return (
      <Html lang="pt">
        <Head />
        <body>
          <Header/>
          <Main />
          <Footer/>
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

问题来了。组件/页脚/index.tsx

import { ChakraProvider,Center,Img,Box,HStack,vstack,heading } from '@chakra-ui/react'
import {Accordion,AccordionItem,AccordionButton,AccordionIcon,AccordionPanel} from '@chakra-ui/accordion'
import guiaTheme from '../../styles/theme';

function Footer() {
  return (
    <ChakraProvider theme={guiaTheme}>
      <Box as="footer" bg="guiared.600">
        <vstack>
          <Center py={2}>
            <Img src="header-logo.png" alt="Teste" height="39" />
          </Center>
          <HStack justify="center">
            <Img src="/appstore-icon.png" srcSet="/appstore-icon.png 1x,/appstore-icon@2x.png 2x" />
            <Img src="/googleplay-icon.png" srcSet="/googleplay-icon.png 1x,/googleplay-icon@2x.png 2x" />
          </HStack>
        </vstack>

        <Accordion>
          <AccordionItem>
            <heading>
              <AccordionButton>
                <Box flex="1" textAlign="left">
                  Section 1 title
                </Box>
                <AccordionIcon />
              </AccordionButton>
            </heading>
            <AccordionPanel pb={4}>
              Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod
              tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
              veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
              commodo consequat.
            </AccordionPanel>
          </AccordionItem>

          <AccordionItem>
            <h2>
              <AccordionButton>
                <Box flex="1" textAlign="left">
                  Section 2 title
                </Box>
                <AccordionIcon />
              </AccordionButton>
            </h2>
            <AccordionPanel pb={4}>
              Lorem ipsum dolor sit amet,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
              commodo consequat.
            </AccordionPanel>
          </AccordionItem>
        </Accordion>

      </Box>
    </ChakraProvider>
  );
}

export default Footer;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

chakra-ui reactjs reactjs reactjs reactjs

Chakra UI 对于自己的组件无法正常工作

问题描述

解决方法

相关问答