How can i add html or body classes from any page? #8971
Unanswered
niklasgrewe
asked this question in
Q&A
Replies: 3 comments
-
|
I'm looking to programmatically add a class to the |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
I'm also wanting to do this :) |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
I'm accomplishing this with a routes/admin.tsx import styles from "~/styles/routes/AdminLayout.module.css";
export const handle = {
bodyClass: styles.body,
};root.tsx import { type UIMatch, useMatches } from "@remix-run/react";
import clsx from "clsx";
export default function App() {
const matches = useMatches() as UIMatch<unknown, { bodyClass: string }>[];
const routeBodyClasses = matches
.filter((match) => match.handle?.bodyClass)
.map((match) => match.handle?.bodyClass);
return (
<html>
<body className={clsx(bodyClasses)}>
...
</body>
</html>
);
} |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
Hi, i would like to find a way to dynamically add html or body classes from any page. Is there a way to do this out of box? In next.js you could expose
pagePropsto do it like this:I know that i can import different
.cssfiles per page likelight.cssordark.css- but i use tailwindcss, so i need a way to add thedarkclass to the html element. But how can i do that per page? Yes, i can also create a<Layout />component and wrap everthing inside it, but doing this way, i need to add the layout component on every page.Are there other/better solutions? How do you do it?
Beta Was this translation helpful? Give feedback.
All reactions