如何为nextjs应用程序中的每个视图导入组件？我想开始使用"；arwes"；作为从中提取组件的框架https://next.arwes.dev/.这是其中一个组件的示例https://playground.arwes.dev/core/FrameCorners/basic.我将在几乎所有视图中使用ArwesThemeProvider、Button、Table、createTheme、withStyles等。将import { ThemeProvider, createTheme, withStyles, Arwes, Button, Table, Image, Frame } from 'arwes';或类似的东西添加到每个视图似乎既麻烦又低效。有没有一种更全球化的方式来做到这一点？我似乎只应该导入一次。这就是我项目的结构。
我为_app.tsx:尝试了这个
import '../styles/globals.css'
import type { AppProps } from 'next/app'
import {
ArwesThemeProvider,
StylesBaseline
} from 'arwes';
function MyApp({ Component, pageProps }: AppProps) {
return (
<ArwesThemeProvider>
<Component {...pageProps} />
</ArwesThemeProvider>
)
}
export default MyApp
对于index.tsx:
import type { NextPage } from 'next'
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
const Home: NextPage = () => {
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<h1 className={styles.title}>
Welcome to <a href="https://nextjs.org">Next.js!</a>
</h1>
<p className={styles.description}>
Get started by editing{' '}
<code className={styles.code}>pages/index.tsx</code>
</p>
<div className={styles.grid}>
<Card
animator={{ animate: false }}
image={{
src: IMAGE_URL
}}
title='Nebula'
options={
<Button palette='secondary'>
<Text>Learn More</Text>
</Button>
}
style={{ maxWidth: 400 }}
>
<Text>
A nebula is an interstellar cloud of dust, hydrogen,
helium and other ionized gases. Originally, the term
was used to describe any diffused astronomical object,
including galaxies beyond the Milky Way.
</Text>
</Card>
</div>
</main>
<footer className={styles.footer}>
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Powered by{' '}
<span className={styles.logo}>
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
</span>
</a>
</footer>
</div>
)
}
export default Home
我得到了这个错误：
error - Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
我做错了什么？
软件包arwes的版本为v1.0.0-alpha.5，文档位于https://version1-breakpoint1.arwes.dev.此版本已弃用。
https://arwes.dev具有最新的公共版本文档。
https://next.arwes.dev是仍在开发中的下一个版本。
该项目仍处于alpha状态，因此可能存在问题、错误、文档丢失和性能问题，因此该框架还不打算用于生产项目。