我正在使用 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;
我不确定是什么可能导致这种情况。