所以我正在做一个项目，但我的边栏组件的行为有点奇怪：
- I(重新(启动服务器，组件如下所示
- 我点击了一个链接项目/我访问了另一个URL，它看起来像这样
我对组件了解不多，对样式组件更不了解，所以我甚至不知道从哪里开始。
组件/边栏.ts
import React, { useState } from 'react';
import { SidebarData } from './SidebarData';
import styled from 'styled-components';
import * as Remix from 'react-icons/ri';
import Submenu from './Submenu';
import { useSession } from 'next-auth/react';
/*
--text-color: #ffffff;
--text-secondary: #fefefe;
--background-color: #091540;
--background-secondary: #262c49;
--background-third: #1a254d;
--blue: #256EFF;
--red: #FF495C;
--green: #3DDC97;
*/
const Nav = styled.div`
background: #091540;
height: 8vh;
display: flex;
justify-content: flex-start;
align-items: center;
color: #ffffff;
`
const NavIcon = styled.div`
margin-left: 2vw;
font-size: 4vh;
height: 8vh;
display: flex;
justify-content: flex-start;
align-items: center;
cursor: pointer;
`
const SidebarNav = styled.div`
background: #091540;
width: 25vh;
height: 100%;
display: flex;
justify-content: center;
position: fixed;
top: 0;
left: ${({ sidebar }) => (sidebar ? '0' : '-100%')};
transition: 350ms;
z-index: 10;
color: #ffffff;
`
const SidebarWrap = styled.div`
width: 100%;
`
const Sidebar = () => {
const [sidebar, setSidebar] = useState(false);
const toggleSidebar = () => setSidebar(!sidebar);
const { data: session, status } = useSession();
return (
<div>
<Nav>
<NavIcon to="#">
<Remix.RiMenuFill onClick={toggleSidebar} />
</NavIcon>
</Nav>
<SidebarNav sidebar={sidebar}>
<SidebarWrap>
<NavIcon to="#">
<Remix.RiMenuFoldFill onClick={toggleSidebar}/>
</NavIcon>
{SidebarData.map((item, index) => {
if(session && item.disappearOnLogin === true && item.authRequired === false) return;
if(!session && item.disappearOnLogin === false && item.authRequired === true) return;
return <Submenu item={item} key={index}/>
})}
</SidebarWrap>
</SidebarNav>
</div>
)
}
export default Sidebar;
如果需要更多的代码，请在Discord上DM我：magma#5090
因此，基本上，为了在服务器端渲染中使用样式化组件，您需要使用样式表重新水合。当你的应用在服务器上呈现时，你可以创建一个ServerStyleSheet，并向你的应用添加一个通过上下文API接受样式的提供程序。
为此，您需要安装一个名为babel-plugin-styled-components的软件包
npm i babel-plugin-styled-components
然后，您想在项目的根目录中创建一个.babelrc文件，并将以下行添加到该文件中：
{
"presets": ["next/babel"],
"plugins": [["styled-components", { "ssr": true }]]
}
然后，您想转到pages文件夹并创建一个_document.js页面。将以下代码添加到此文件：
import Document from "next/document";
import { ServerStyleSheet } from "styled-components";
export default class MyDocument extends Document {
static async getInitialProps(ctx) {
const sheet = new ServerStyleSheet();
const originalRenderPage = ctx.renderPage;
try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) =>
sheet.collectStyles(<App {...props} />),
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
styles: (
<>
{initialProps.styles}
{sheet.getStyleElement()}
</>
),
};
} finally {
sheet.seal();
}
}
}
有一种方法可以用.tsx文件来实现这一点，但我不确定，使用.js文件对我有效，所以如果你愿意，我会让你来计算Typescript版本。
重新启动你的服务器，你的风格组件应该会得到很好的选择。
我不得不花很多时间来解决同样的问题。正如大家在许多线程中提到的那样，我尝试创建.babelrc文件，但没有解决我的问题。最后，我创建了_document.tsx文件，并在.babelrc文件中添加了以下代码。以下代码适用于任何找到typescript版本的人。
import Document, {
Html,
Head,
Main,
NextScript,
DocumentContext,
} from "next/document";
import { ServerStyleSheet } from "styled-components";
export default class MyDocument extends Document {
static async getInitialProps(ctx: DocumentContext) {
const sheet = new ServerStyleSheet();
const originalRenderPage = ctx.renderPage;
try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) =>
sheet.collectStyles(<App {...props} />),
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
styles: (
<>
{initialProps.styles}
{sheet.getStyleElement()}
</>
),
};
} finally {
sheet.seal();
}
}
render() {
return (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}