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.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();
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
.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
.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/cssconst { 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>
);
}
Last modified 1mo ago