0

我正在使用 nextjs 和 chakra ui 并做了一些让我所有的组件样式消失的事情。在我的样式输出中,我可以看到组件样式以及浏览器中的计算样式,但它们没有转换为有效的 css 属性。

在此处输入图像描述

提供者在范围内 (_app.tsx):

import { ChakraProvider } from '@chakra-ui/react';
import useHydrateUser from 'app/hooks/useHydrateUser';
import useLocale from 'app/hooks/useLocale';
import { AuthProvider } from 'app/stores/authStore';
import { ConsistentProvider } from 'app/stores/consistent';
import MessagesProvider from 'app/stores/messages';
import { UiProvider } from 'app/stores/uiStore';
import { AppProps } from 'next/dist/next-server/lib/router/router';
import { useRef } from 'react';
import { IntlProvider } from 'react-intl';
import { QueryClient, QueryClientProvider } from 'react-query';
import { ReactQueryDevtools } from 'react-query/devtools';

function App({ Component, pageProps }: AppProps) {
    const { messages, shortLocale } = useLocale();
    useHydrateUser();

    const queryClientRef = useRef<QueryClient>();
    if (!queryClientRef.current) {
        queryClientRef.current = new QueryClient({
            defaultOptions: {
                queries: {
                    staleTime: 1000 * 5 * 60,
                },
            },
        });
    }

    return (
        <IntlProvider
            locale={shortLocale}
            messages={messages}
            onError={() => null}
        >
            <meta charSet={'utf-8'} />
            <QueryClientProvider client={queryClientRef.current}>
                <ChakraProvider>
                    <MessagesProvider>
                        <UiProvider>
                            <AuthProvider>
                                <ConsistentProvider>
                                    <Component {...pageProps} />
                                </ConsistentProvider>
                            </AuthProvider>
                        </UiProvider>
                    </MessagesProvider>
                </ChakraProvider>
                <ReactQueryDevtools initialIsOpen={false} />
            </QueryClientProvider>
        </IntlProvider>
    );
}

export default App;

我不确定是什么可能导致这种情况。

4

0 回答 0