makeStyles -> useStyles

For new projects, we recommend using the modern API instead of the makeStyles API. While the makeStyles API was designed to mirror the Material-UI v4 makeStyles approach, a more streamlined and readable API has been introduced since. We encourage you to adopt this newer API. However, this does not imply that the makeStyles and withStyle APIs are deprecated.

makeStyles()

Your component style may depend on the props and state of the components:

const useStyles = makeStyles<{ color: string; }>()(
    (_theme, { color }) => ({
        "root": {
            "backgroundColor": color
        }
    })
);

//...

const { classes } = useStyles({ "color": "grey" });

...Or it may not:

const useStyles = makeStyles()({
    //If you don't need neither the theme nor any state or
    //props to describe your component style you can pass-in
    //an object instead of a callback.
    "root": {
        "backgroundColor": "pink"
    }
});

//...

const { classes } = useStyles();

Naming the stylesheets (useful for debugging and theme style overrides)

To ease debugging you can specify a name that will appear in every class names. It is like the option.name in material-ui v4's makeStyles.

It's also required to for theme style overrides.

const useStyles = makeStyles({ "name": "MyComponent" })({
    "root": {
        /*...*/
    }
});

//...

const { classes } = useStyles();

//classes.root will be a string like: "tss-xxxxxx-MyComponent-root"

Usually, you want the name to match the name of the component you are styling. You can pass the name as the first key or a wrapper object like so:

export function MyComponent() {
    const { classes } = useStyles();
    return <h1 className={classes.root}>Hello World</h1>;
}

const useStyles = makeStyles({ "name": { MyComponent } })({
    "root": {
        /*...*/
    }
});

//...

const { classes } = useStyles();

//classes.root will be a string like: "css-xxxxxx-MyComponent-root"

This prevent you from having to remember to update the label when you rename the component.

You can also explicitly provide labels on a case by case basis if you do, your label will overwrite the one generated by tss-react.

useStyles()

Beside the classes, useStyles also returns cx, css and your theme. css is the function as defined in @emotion/css cx is the function as defined in @emotion/css

const { classes, cx, css, theme } = useStyles(/*...*/);

In some components you may need cx, css or theme without defining custom classes. For that purpose you can use the useStyles hook returned by createMakeStyles.

makeStyles.ts

import { createMakeAndWithStyles } from "tss-react";

function useTheme() {
    return {
        "primaryColor": "#32CD32",
    };
}

export const {
    makeStyles,
    useStyles //<- This useStyles is like the useStyles you get when you
    //   call makeStyles but it doesn't return a classes object.
} = createMakeAndWithStyles({ useTheme });

./MyComponent.tsx

//Here we can 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>
    );
}