noble-gold

Inline styles

I'm building a whitelabel multi-tenant app that gets the tenant colors from an api before render. I found this hacky solution to inject the theme directly on the head of my root component like this:

function RootComponent() {                    
  const { authState } = Route.useLoaderData() 
  const theme = getTheme(authState)           
                                              
  return (                                    
    <html>                                    
      <head>                                  
        <HeadContent />                       
        <style>{theme}</style>                
      </head>                                 
      <body>         
        <Outlet />                            
        <Scripts />                           
      </body>                                 
    </html>                                   
  )                                           
}

function RootComponent() {                    
  const { authState } = Route.useLoaderData() 
  const theme = getTheme(authState)           
                                              
  return (                                    
    <html>                                    
      <head>                                  
        <HeadContent />                       
        <style>{theme}</style>                
      </head>                                 
      <body>         
        <Outlet />                            
        <Scripts />                           
      </body>                                 
    </html>                                   
  )                                           
}

But I was wondering if there was cleaner way using the createFileRoute function, something like this:

head: ({ match }) => {                      
  const { context } = match                 
  const theme = getTheme(context.authState) 
  return {                                  
    styles: [ { content: theme } ],         
  }                                         
}

head: ({ match }) => {                      
  const { context } = match                 
  const theme = getTheme(context.authState) 
  return {                                  
    styles: [ { content: theme } ],         
  }                                         
}

10 Replies

ratty-blush•3mo ago

is this router or start?

noble-goldOP•3mo ago

Oh, it's start. My bad for putting this on the wrong channel.

ratty-blush•3mo ago

no problem, next time please use #start-questions so yes, head() is the way you have access to loader data there

noble-goldOP•2mo ago

Hello, somehow I forgot about this issue. The problem is that there is no styles option to be returned from head, the example I provided above is not possible on the current version o TanStack Start / Router.

ratty-blush•2mo ago

we should add styles to head do you want to contribute this?

noble-goldOP•2mo ago

I'm not familiar with this framework codebase, is there any resources for learning?

ratty-blush•2mo ago

hm you would need to study the code

harsh-harlequin•2mo ago

@Luks if you don't mind I would like to contribute if possible.

ratty-blush•2mo ago

sure go ahead!

harsh-harlequin•2mo ago

Pull request opened: https://github.com/TanStack/router/pull/4559

GitHub

Add style to HeadContent by felipestanzani · Pull Request #4559 ·...

Currently Route HeadContent don&#39;t have support to inline style tags. After a contribution proposition made by @schiller-manuel in the Discord Group I have decided to implement this. I also ...

Gaming

Programming

Inline styles

Did you find this page helpful?