# makeStyles -> useStyles

{% hint style="warning" %}
For new projects, we recommend using [the modern API instead](/api/tss-usestyles.md) 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.
{% endhint %}

### `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](/mui-global-styleoverrides.md))

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](/mui-global-styleoverrides.md).

```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: "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](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 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>
    );
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.tss-react.dev/api/makestyles.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.