makeStyles -> useStyles
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.tsimport { 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