钩子
页
Chakra在pages文件夹中工作得很好，但当试图在components文件夹中使用它时，问题就开始了。
我添加了ChakraProvider来识别属性，到目前为止还不错，但是Accordion不起作用，使手风琴在自己的组件上工作的正确方法是什么?
文件夹结构如下:
src
- 组件头
- >
- 页脚
"@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
页面/_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, 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>
</Accordion>
</Box>
</ChakraProvider>
);
}
export default Footer;
我可以想象所有的应用程序都包装在MyApp组件在pages文件夹…
你应该只在一个ChakraProvider上包装chakra组件，你的页脚组件有他自己的ChakraProvider，但也被MyApp的ChakraProvider包裹。
你的ChakraProvider只需要包装App。它提供了"访问";到Chakra，