Chakra-ui：所有组件样式都消失了？

问题描述

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

prodivder 在范围内 (_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;

我不确定可能导致这种情况的原因。

解决方法

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

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

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