Last updated
Last updated
For new projects, we recommend using 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:
...Or it may not:
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:
This prevent you from having to remember to update the label when you rename the component.
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
./MyComponent.tsx
To ease debugging you can specify a name that will appear in every class names. It is like the .
It's also required to for .
You can also explicitly 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 cx
is the function as defined in