Q: How to implement styled components in Remix I am new using Remix. I have built a React Application with styled components and now I am trying to change it to be sever-side instead of client-side to improve the SEO (since my routes are not captured by google robots). To make it, I start a new project base on remix (my idea is to move the components, pages and data to this one) but I can't manage to implement my styled components. I have try this:
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>
        </>
      )
    }

with a GlobalStyles file that works in the React project but it doesn't work here. I have three questions that would appreciate if someone could answer:

*

*Why isn't it working?

*What is the best way to move this kind of React project to use server-side rendering?

*How could I implement styled components with Remix without moving all components to CSS sheets?

Thanks you so much in advance!!
