如何在 Remix 中实现样式化组件-解网

问：

我是使用 Remix 的新手。我已经构建了一个带有样式组件的 React 应用程序，现在我正在尝试将其更改为服务器端而不是客户端以改善 SEO（因为我的路由没有被谷歌机器人捕获）。为了做到这一点，我开始了一个基于混音的新项目（我的想法是将组件、页面和数据移动到这个项目中），但我无法实现我的样式组件。我试过这个：

export default function App() {
  return (
    <Document>
      <Layout>
        <Outlet/>
      </Layout> 
    </Document>
  )
}

    function Document({ children, title }) {
      return (
        <html lang='es'>
          <head>
            <title> {title? title: 'Remix Tutorial'}</title>
          </head>
          <body>
            {children}
            {process.env.NODE_ENV === 'development' ? <LiveReload /> : null}
          </body>
        </html>
      )
    }
    
    function Layout({children}){
      return (
        <>
          <nav className='navbar'>
            <Link to='/' className ='logo'>
              Link
            </Link>
            <ul className='nav'>
              <li>
                <Link to ='/posts'>Posts</Link>
              </li>
            </ul>
          </nav>
          <div className='container'>
            <GlobalStyles>
              {children}
            </GlobalStyles>
          </div>
        </>
      )
    }

使用在 React 项目中工作但在这里不起作用的 GlobalStyles 文件。如果有人能回答，我将不胜感激：

为什么它不起作用？
将这种 React 项目迁移到使用服务器端渲染的最佳方法是什么？
如何在不将所有组件移动到 CSS 表的情况下使用 Remix 实现样式化组件？

提前非常感谢你！！

reactjs 样式组件服务器端混音

如何在 Remix 中实现样式化组件

How to implement styled components in Remix

评论