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:
But I was wondering if there was cleaner way using the
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
createFileRoutecreateFileRoute 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 } ],
}
} 
