Example
First, start by creating a file named app/api/client-style. This file acts as a Next.js API route and uses the postStyles function to handle use-client style.
'use client'
import { stClient } from "stayedcss/client";
export default function ArticleClient() {
return (
<div className={style.container}>
<div className={style.title}>title</div>
<div className={style.content}>content</div>
</div>
);
}
const style = stClient({
componentId: "components/docs/article-client",
container: {
marginBottom: 60,
},
title:{
fontSize: 27,
},
content: {
marginTop: 32,
lineHeight: "1.5em",
},
});
1. Create an API
First, start by creating a file named app/api/client-style. This file acts as a Next.js API route and uses the postStyles function to handle use-client style.
// app/api/client-style
import { requestStyles } from "stayedcss";
export function POST(request: Request) {
return requestStyles(request);
}
2. Use stayedcssClient in Components
And import the stayedcssClient into your components to define and manage styles. The client generates styles based on a unique componentId and the style definitions provided.
'use client'
import { stClient } from "stayedcss/client";
export default function ArticleClient() {
return (
<div className={style.container}>
<div className={style.title}>title</div>
<div className={style.content}>content</div>
</div>
);
}
const style = stClient({
componentId: "components/docs/article-client",
container: {
marginBottom: 60,
},
title:{
fontSize: 27,
},
content: {
marginTop: 32,
lineHeight: "1.5em",
},
});
Now you can add client-styles.