How to implement react-jss in next.js13 app directory

Question

there is an example here but it's using the _document file which does`t exist in the next13 app directory

EDIT: you can use css-in-js library called cxs, it doesnt need any configuration. just install and use. i put a little example to how you can leverage every styling option, global, module and cxs.

a little note you can use it like scss - target the parent div and use selector, its very convenient.

"use client"

import style from "./hero.module.scss"
import cxs from "cxs"

export default function Hero() {
  const cxsStyle = cxs({
    " h3": { color: "red" },
    " button": { backgroundColor: "blue" },
  })

  return (
    <div className="globalClass">
      <div className={cxsStyle}>
        <h1>Some Title</h1>
        <p>lorem ipsum</p>
        <button className={style.btn}>click me</button>
      </div>
    </div>
  )
}