import { makeStyles } from "./makeStyles";

const useStyles = makeStyles<{ color: "red" | "blue" }>()(
    (theme, { color }) => ({
        "root": {
            color,
            "&:hover": {
                "backgroundColor": theme.primaryColor,
            },
        },
    }),
);

export function MyComponent(props: Props) {
    const { className } = props;

    const [color, setColor] = useState<"red" | "blue">("red");

    const { classes, cx } = useStyles({ color });

    return <span className={cx(classes.root, className)}>hello world</span>;
}

//Here we ca import useStyles directly instead of generating it from makeStyles.
import { useStyles } from "./makeStyles";

export function MyComponent(props: Props) {
    const { className } = props;

    const { cx, css, theme } = useStyles();

    return (
        <span className={cx(css({ "color": theme.primaryColor }), className)}>
            hello world
        </span>
    );
}

import { GlobalStyles } from "tss-react";

function MyComponent() {
    return (
        <>
            <GlobalStyles
                styles={{
                    "body": {
                        "backgroundColor": "pink",
                    },
                    ".foo": {
                        "color": "cyan",
                    },
                }}
            />
            <h1 className="foo">This text will be cyan</h1>
        </>
    );
}

{
  "parent": {
      "padding": 30,
      "&:hover $child": {
          "backgroundColor": "red"
      },
  },
  "child": {
      "backgroundColor": "blue"
  }
}
//...
<div className={classes.parent}>
    <div className={classes.children}>
        Background turns red when the mouse is hover the parent
    </div>
</div>

const useStyles = makeStyles()((_theme, _params, createRef) => {
    const child = {
        "ref": createRef(),
        "background": "blue",
    } as const; //<- In many case 'as const' must be used so that it can be inferred as CSSObject

    return {
        "parent": {
            "padding": 30,
            [`&:hover .${child.ref}`]: {
                "background": "red",
            },
        },
        child,
    };
});

export function App() {
    const { classes } = useStyles();

    return (
        <div className={classes.parent}>
            <div className={classes.child}>
                Background turns red when mouse is hover the parent.
            </div>
        </div>
    );
}

import { createDocument } from "tss-react/nextJs";

const { Document } = createDocument();

/*
With mui v5 (or if you are using custom caches):

import { muiCache } from "...";

const { Document } = createDocument({ "caches": [ muiCache ] });

If you are providing custom caches to tss-react using <TssCacheProvider value={tssCache} >
you should pass it as well.

const { Document } = createDocument({ "caches": [ muiCache, tssCache ] });

Generally speaking all the emotion caches used in your app should be provided.
Just remember to first provide the caches used by mui then the caches used by tss. Example:

const { Document } = createDocument({ "caches": [ muiCache1, muiCache2, tssCache1, tssCache2 ] });
*/

export default Document;

import Document from "next/document";
import type { DocumentContext } from "next/document";
import { createGetInitialProps } from "tss-react/nextJs";

const { getInitialProps } = createGetInitialProps();

/*
With mui v5 (or if you are using custom caches):

import { muiCache } from "...";

const { getInitialProps } = createGetInitialProps({ "caches": [ muiCache ] });

If you are providing custom caches to tss-react using <TssCacheProvider value={tssCache} >
you should pass it as well.

const { getInitialProps } = createGetInitialProps({ "caches": [ muiCache, tssCache ] });

Generally speaking all the emotion caches used in your app should be provided.
Just remember to first provide the caches used by mui then the caches used by tss. Example:

const { getInitialProps } = createGetInitialProps({ "caches": [ muiCache1, muiCache2, tssCache1, tssCache2 ] });
*/

export default class AppDocument extends Document {
    static async getInitialProps(ctx: DocumentContext) {
        return getInitialProps(ctx);
    }

    //...Rest of your class...
}

import Document from "next/document";
import type { DocumentContext } from "next/document";
import { createPageHtmlToStyleTags } from "tss-react/nextJs";

const { pageHtmlToStyleTags } = createPageHtmlToStyleTags();
/*
With mui v5 (or if you are using custom caches):

import { muiCache } from "...";

const { pageHtmlToStyleTags } = createPageHtmlToStyleTags({ "caches": [ muiCache ] });

If you are providing custom caches to tss-react using <TssCacheProvider value={tssCache} >
you should pass it as well.

const { pageHtmlToStyleTags } = createPageHtmlToStyleTags({ "caches": [ muiCache, tssCache ] });

Generally speaking all the emotion caches used in your app should be provided.
Just remember to first provide the caches used by mui then the caches used by tss. Example:

const { pageHtmlToStyleTags } = createPageHtmlToStyleTags({ "caches": [ muiCache1, muiCache2, tssCache1, tssCache2 ] });
*/

export default class AppDocument extends Document {
    static async getInitialProps(ctx: DocumentContext) {
        const page = await ctx.renderPage();

        const initialProps = await Document.getInitialProps(ctx);

        return {
            ...initialProps,
            "styles": (
                <>
                    {initialProps.styles}
                    {pageHtmlToStyleTags({ "pageHtml": page.html })}
                </>
            ),
        };
    }

    //...Rest of your class...
}

import { renderToString } from "react-dom/server";
import createEmotionServer from "@emotion/server/create-instance";

import { getTssDefaultEmotionCache } from "tss-react/cache";
import { createMakeStyles } from "tss-react";

const emotionServers = [
    getTssDefaultEmotionCache(), //If you use custom cache(s) provide it/them here instead of the default, see example below.
].map(createEmotionServer);

/*
With mui v5 (or if you are using custom caches):

import { muiCache } from "...";

const emotionServers = [
    muiCache,
    getTssDefaultEmotionCache()
].map(createEmotionServer);

If you are providing custom caches to tss-react using <TssCacheProvider value={tssCache} >
you should pass it as well.

const emotionServers = [
    muiCache,
    tssCache
].map(createEmotionServer);

Generally speaking all the emotion caches used in your app should be provided.
Just remember to first provide the caches used by mui then the caches used by tss. Example:

const emotionServers = [
    muiCache1,
    muiCache2,
    tssCache1,
    tssCache2
].map(createEmotionServer);
*/

const element = <App />;

const html = renderToString(element);

res.status(200).header("Content-Type", "text/html").send(`<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My site</title>
    ${emotionServers
        .map(({ extractCriticalToChunks, constructStyleTagsFromChunks }) =>
            constructStyleTagsFromChunks(extractCriticalToChunks(html)),
        )
        .join("")}
</head>
<body>
    <div id="root">${html}</div>
    <script src="./bundle.js"></script>
</body>
</html>`);