# makeStyles -> useStyles

### `makeStyles()`

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

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

//...

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

...Or it may not:

```typescript
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](https://docs.tss-react.dev/v3-1/mui-theme-styleoverrides))

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`](https://mui.com/styles/api/#makestyles-styles-options-hook).

It's also required to for [theme style overrides](https://docs.tss-react.dev/v3-1/mui-theme-styleoverrides).

```typescript
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:

```tsx
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: "tss-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](https://emotion.sh/docs/labels) 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](https://emotion.sh) `cx` is the function as defined in [@emotion/css](https://emotion.sh/docs/@emotion/css#cx)

```typescript
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`

```typescript
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`

```tsx
//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>
    );
}
```