react-mui-jss-styles-to-tss-react-hook-migration

Transform React components using Material UI JSS APIs (e.g., makeStyles/withStyles/createStyles) into strongly typed `tss-react` hook-based styling (`makeStyles` from `tss-react/mui`) in TypeScript React codebases, improving maintainability and type safety while modernizing legacy styling patterns.

Public

cross-migrationreactmuitss-react

Public

0 executions

@codemod/react-mui-jss-styles-to-tss-react-hook-migration

Name: react-mui-jss-styles-to-tss-react-hook-migration codemod
Availability: InStock

Transform React components using Material UI JSS APIs (e.g., makeStyles/withStyles/createStyles) into strongly typed tss-react hook-based styling (makeStyles from tss-react/mui) in TypeScript React codebases, improving maintainability and type safety while modernizing legacy styling patterns.

Installation

bash

Usage

This codemod targets **/*.{ts,tsx} files that still import legacy styling helpers from @material-ui/core/styles, @material-ui/styles, or @mui/styles.

It currently rewrites these supported shapes:

makeStyles(...) imports and calls into makeStyles()(... ) from tss-react/mui
createStyles(...) wrappers nested inside supported makeStyles or withStyles style declarations
const classes = useStyles(...) call sites into const { classes } = useStyles(...)
withStyles(styles)(Component) when Component is a supported function component with an injected classes prop

The transform is intentionally conservative. It skips files when it cannot safely preserve behavior, including:

files without JSX unless --param allow-non-react=true is set
unsupported or non-local makeStyles factories
withStyles class components
legacy style imports that are present but never used

Examples:

tsx

becomes:

tsx

Useful workflow params:

bash

Development

bash

License

MIT

Registry

Ready to contribute?