我正在制作一个简单的React/Express网站,我正在尝试使用样式组件库实现CSS-in-JS。我的应用程序用正常的。css文件渲染一切都很好,但是当我尝试引入一个有样式的组件时,页面上没有任何渲染,并且我在控制台中得到一堆错误。特别是,我得到了一个"Uncaught TypeError: Cannot read properties of null (reading 'useDebugValue')
";错误。
我的App.js文件是这样的:
import React, { Component } from 'react';
import { Routes, Route } from 'react-router-dom';
import styled from 'styled-components'
import MainPage from './components/mainPage.component.js';
const AppWrapper = styled.div`
text-align: center;
`;
class App extends Component {
render() {
return (
<div>
<AppWrapper>
<NavBar />
<Routes>
<Route path="/" element={<MainPage />}/>
</Routes>
</AppWrapper>
</div>
);
}
}
export default App;
我试图搞乱组件,但我得到的错误,无论什么文件的样式组件,即使组件本身(如<AppWrapper>
)不包含任何东西。我也收到了一封"Warning: Invalid hook call. Hooks can only be called inside of the body of a function component.
";错误,但我不确定这是如何相关的。
知道为什么会这样吗?谢谢!
对于任何遇到这个问题的人,我想我找到了解决方案。它也发生在情感上(另一个css-in-js库),所以问题不在于特定的库,而在于我的依赖项中的库复制。这个帖子解释得很好:https://github.com/styled-components/styled-components/issues/3045。我通过卸载样式组件(安装在我的项目根文件夹中)并重新安装在我的react/client-side文件夹中来解决这个问题。