Skip to content
🚀 MUI X v6 is out! Discover what's new and get started now!
Edit this page

Migrating from JSS (optional)

This guide explains how to migrate from JSS to Emotion when updating from Material UI v4 to v5.

Material UI v5 migration

  1. Getting started
  2. Breaking changes part one: style and theme
  3. Breaking changes part two: components
  4. Migrating from JSS 👈 you are here
  5. Troubleshooting

Migrating from JSS to Emotion

One of the biggest changes in v5 is the replacement of JSS for Emotion (or styled-components as an alternative) as a default styling solution .

Note that you may continue to use JSS for adding overrides for the components (e.g. makeStyles, withStyles) even after migrating to v5. Then, if at any point you want to move over to the new styling engine, you can refactor your components progressively.

This document reviews all the steps necessary to migrate away from JSS.

While you can use either of the following two options, the first is considered preferable:

1. Use styled or sx API

Codemod

We provide a codemod to help migrate JSS styles to styled API, but this approach increases the CSS specificity.

npx @mui/codemod v5.0.0/jss-to-styled <span class="token operator">&lt;</span>path<span class="token operator">></span>

Example transformation:

<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">import Typography from '@mui/material/Typography';
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">import makeStyles from '@mui/styles/makeStyles';
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">import { styled } from '@mui/material/styles';
</span></span>
<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">const useStyles = makeStyles((theme) => ({
</span><span class="token prefix deleted">-</span><span class="token line">  root: {
</span><span class="token prefix deleted">-</span><span class="token line">    display: 'flex',
</span><span class="token prefix deleted">-</span><span class="token line">    alignItems: 'center',
</span><span class="token prefix deleted">-</span><span class="token line">    backgroundColor: theme.palette.primary.main
</span><span class="token prefix deleted">-</span><span class="token line">  },
</span><span class="token prefix deleted">-</span><span class="token line">  cta: {
</span><span class="token prefix deleted">-</span><span class="token line">    borderRadius: theme.shape.radius
</span><span class="token prefix deleted">-</span><span class="token line">  },
</span><span class="token prefix deleted">-</span><span class="token line">  content: {
</span><span class="token prefix deleted">-</span><span class="token line">    color: theme.palette.common.white,
</span><span class="token prefix deleted">-</span><span class="token line">    fontSize: 16,
</span><span class="token prefix deleted">-</span><span class="token line">    lineHeight: 1.7
</span><span class="token prefix deleted">-</span><span class="token line">  },
</span><span class="token prefix deleted">-</span><span class="token line">}))
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">const PREFIX = 'MyCard';
</span><span class="token prefix inserted">+</span><span class="token line">const classes = {
</span><span class="token prefix inserted">+</span><span class="token line">  root: `${PREFIX}-root`,
</span><span class="token prefix inserted">+</span><span class="token line">  cta: `${PREFIX}-cta`,
</span><span class="token prefix inserted">+</span><span class="token line">  content: `${PREFIX}-content`,
</span><span class="token prefix inserted">+</span><span class="token line">}
</span><span class="token prefix inserted">+</span><span class="token line">const Root = styled('div')(({ theme }) => ({
</span><span class="token prefix inserted">+</span><span class="token line">  [`&amp;.${classes.root}`]: {
</span><span class="token prefix inserted">+</span><span class="token line">    display: 'flex',
</span><span class="token prefix inserted">+</span><span class="token line">    alignItems: 'center',
</span><span class="token prefix inserted">+</span><span class="token line">    backgroundColor: theme.palette.primary.main
</span><span class="token prefix inserted">+</span><span class="token line">  },
</span><span class="token prefix inserted">+</span><span class="token line">  [`&amp; .${classes.cta}`]: {
</span><span class="token prefix inserted">+</span><span class="token line">    borderRadius: theme.shape.radius
</span><span class="token prefix inserted">+</span><span class="token line">  },
</span><span class="token prefix inserted">+</span><span class="token line">  [`&amp; .${classes.content}`]: {
</span><span class="token prefix inserted">+</span><span class="token line">    color: theme.palette.common.white,
</span><span class="token prefix inserted">+</span><span class="token line">    fontSize: 16,
</span><span class="token prefix inserted">+</span><span class="token line">    lineHeight: 1.7
</span><span class="token prefix inserted">+</span><span class="token line">  },
</span><span class="token prefix inserted">+</span><span class="token line">}))
</span></span>
<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">export const MyCard = () => {
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">  const classes = useStyles();
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">  return (
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">    &lt;div className={classes.root}>
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">    &lt;Root className={classes.root}>
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">      {/* The benefit of this approach is that the code inside Root stays the same. */}
</span><span class="token prefix unchanged"> </span><span class="token line">      &lt;Typography className={classes.content}>...&lt;/Typography>
</span><span class="token prefix unchanged"> </span><span class="token line">      &lt;Button className={classes.cta}>Go&lt;/Button>
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">    &lt;/div>
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">    &lt;/Root>
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">  )
</span><span class="token prefix unchanged"> </span><span class="token line">}</span></span>

Manual

We recommend sx API over styled for creating responsive styles or overriding minor CSS. Read more about sx here.

<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">import Chip from '@mui/material/Chip';
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">import makeStyles from '@mui/styles/makeStyles';
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">import Box from '@mui/material/Box';
</span></span>
<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">const useStyles = makeStyles((theme) => ({
</span><span class="token prefix deleted">-</span><span class="token line">  wrapper: {
</span><span class="token prefix deleted">-</span><span class="token line">    display: 'flex',
</span><span class="token prefix deleted">-</span><span class="token line">  },
</span><span class="token prefix deleted">-</span><span class="token line">  chip: {
</span><span class="token prefix deleted">-</span><span class="token line">    padding: theme.spacing(1, 1.5),
</span><span class="token prefix deleted">-</span><span class="token line">    boxShadow: theme.shadows[1],
</span><span class="token prefix deleted">-</span><span class="token line">  }
</span><span class="token prefix deleted">-</span><span class="token line">}));
</span></span>
<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">function App() {
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">  const classes = useStyles();
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">  return (
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">    &lt;div className={classes.wrapper}>
</span><span class="token prefix deleted">-</span><span class="token line">      &lt;Chip className={classes.chip} label="Chip" />
</span><span class="token prefix deleted">-</span><span class="token line">    &lt;/div>
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">    &lt;Box sx={{ display: 'flex' }}>
</span><span class="token prefix inserted">+</span><span class="token line">      &lt;Chip label="Chip" sx={{ py: 1, px: 1.5, boxShadow: 1 }} />
</span><span class="token prefix inserted">+</span><span class="token line">    &lt;/Box>
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">  );
</span><span class="token prefix unchanged"> </span><span class="token line">}</span></span>

In some cases, you might want to create multiple styled components in a file instead of increasing CSS specificity.

For example:

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">import makeStyles from '@mui/styles/makeStyles';
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">import { styled } from '@mui/material/styles';
</span></span>
<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">const useStyles = makeStyles((theme) => ({
</span><span class="token prefix deleted">-</span><span class="token line">  root: {
</span><span class="token prefix deleted">-</span><span class="token line">    display: 'flex',
</span><span class="token prefix deleted">-</span><span class="token line">    alignItems: 'center',
</span><span class="token prefix deleted">-</span><span class="token line">    borderRadius: 20,
</span><span class="token prefix deleted">-</span><span class="token line">    background: theme.palette.grey[50],
</span><span class="token prefix deleted">-</span><span class="token line">  },
</span><span class="token prefix deleted">-</span><span class="token line">  label: {
</span><span class="token prefix deleted">-</span><span class="token line">    color: theme.palette.primary.main,
</span><span class="token prefix deleted">-</span><span class="token line">  }
</span><span class="token prefix deleted">-</span><span class="token line">}))
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">const Root = styled('div')(({ theme }) => ({
</span><span class="token prefix inserted">+</span><span class="token line">  display: 'flex',
</span><span class="token prefix inserted">+</span><span class="token line">  alignItems: 'center',
</span><span class="token prefix inserted">+</span><span class="token line">  borderRadius: 20,
</span><span class="token prefix inserted">+</span><span class="token line">  background: theme.palette.grey[50],
</span><span class="token prefix inserted">+</span><span class="token line">}))
</span></span>
<span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">const Label = styled('span')(({ theme }) => ({
</span><span class="token prefix inserted">+</span><span class="token line">  color: theme.palette.primary.main,
</span><span class="token prefix inserted">+</span><span class="token line">}))
</span></span>
<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">function Status({ label }) {
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">  const classes = useStyles();
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">  return (
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">    &lt;div className={classes.root}>
</span><span class="token prefix deleted">-</span><span class="token line">      {icon}
</span><span class="token prefix deleted">-</span><span class="token line">      &lt;span className={classes.label}>{label}&lt;/span>
</span><span class="token prefix deleted">-</span><span class="token line">    &lt;/div>
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">    &lt;Root>
</span><span class="token prefix inserted">+</span><span class="token line">      {icon}
</span><span class="token prefix inserted">+</span><span class="token line">      &lt;Label>{label}&lt;/Label>
</span><span class="token prefix inserted">+</span><span class="token line">    &lt;/Root>
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">  )
</span><span class="token prefix unchanged"> </span><span class="token line">}</span></span>

2. Use tss-react

The API is similar to JSS makeStyles, but under the hood, it uses @emotion/react. It also features much better TypeScript support than v4's makeStyles.

In order to use it, you'll need to add it to your project's dependencies:

With npm:

<span class="token function">npm</span> <span class="token function">install</span> tss-react

With yarn:

<span class="token function">yarn</span> <span class="token function">add</span> tss-react

Codemod

We provide a codemod to help migrate JSS styles to the tss-react API.

npx @mui/codemod v5.0.0/jss-to-tss-react <span class="token operator">&lt;</span>path<span class="token operator">></span>

Example transformation:

<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">import React from 'react';
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">import makeStyles from '@material-ui/styles/makeStyles';
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">import { makeStyles } from 'tss-react/mui';
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">import Button from '@mui/material/Button';
</span><span class="token prefix unchanged"> </span><span class="token line">import Link from '@mui/material/Link';
</span></span>
<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">const useStyles = makeStyles((theme) => {
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">const useStyles = makeStyles()((theme) => {
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">  return {
</span><span class="token prefix unchanged"> </span><span class="token line">    root: {
</span><span class="token prefix unchanged"> </span><span class="token line">      color: theme.palette.primary.main,
</span><span class="token prefix unchanged"> </span><span class="token line">    },
</span><span class="token prefix unchanged"> </span><span class="token line">    apply: {
</span><span class="token prefix unchanged"> </span><span class="token line">      marginRight: theme.spacing(2),
</span><span class="token prefix unchanged"> </span><span class="token line">    },
</span><span class="token prefix unchanged"> </span><span class="token line">  };
</span><span class="token prefix unchanged"> </span><span class="token line">});
</span></span>
<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">function Apply() {
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">  const classes = useStyles();
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">  const { classes } = useStyles();
</span></span>
<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">  return (
</span><span class="token prefix unchanged"> </span><span class="token line">    &lt;div className={classes.root}>
</span><span class="token prefix unchanged"> </span><span class="token line">      &lt;Button component={Link} to="https://support.mui.com" className={classes.apply}>
</span><span class="token prefix unchanged"> </span><span class="token line">        Apply now
</span><span class="token prefix unchanged"> </span><span class="token line">      &lt;/Button>
</span><span class="token prefix unchanged"> </span><span class="token line">    &lt;/div>
</span><span class="token prefix unchanged"> </span><span class="token line">  );
</span><span class="token prefix unchanged"> </span><span class="token line">}
</span></span>
<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">export default Apply;</span></span>

If you were using the $ syntax and clsx to combine multiple CSS classes, the transformation would look like this:

<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">import * as React from 'react';
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">import { makeStyles } from '@material-ui/core/styles';
</span><span class="token prefix deleted">-</span><span class="token line">import clsx from 'clsx';
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">import { makeStyles } from 'tss-react/mui';
</span></span>
<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">const useStyles = makeStyles((theme) => ({
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">const useStyles = makeStyles&lt;void, 'child' | 'small'>()((theme, _params, classes) => ({
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">  parent: {
</span><span class="token prefix unchanged"> </span><span class="token line">    padding: 30,
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">    '&amp;:hover $child': {
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">    [`&amp;:hover .${classes.child}`]: {
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">      backgroundColor: 'red',
</span><span class="token prefix unchanged"> </span><span class="token line">    },
</span><span class="token prefix unchanged"> </span><span class="token line">  },
</span><span class="token prefix unchanged"> </span><span class="token line">  small: {},
</span><span class="token prefix unchanged"> </span><span class="token line">  child: {
</span><span class="token prefix unchanged"> </span><span class="token line">    backgroundColor: 'blue',
</span><span class="token prefix unchanged"> </span><span class="token line">    height: 50,
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">    '&amp;$small': {
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">    [`&amp;.${classes.small}`]: {
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">      backgroundColor: 'lightblue',
</span><span class="token prefix unchanged"> </span><span class="token line">      height: 30
</span><span class="token prefix unchanged"> </span><span class="token line">    }
</span><span class="token prefix unchanged"> </span><span class="token line">  },
</span><span class="token prefix unchanged"> </span><span class="token line">}));
</span></span>
<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">function App() {
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">  const classes = useStyles();
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">  const { classes, cx } = useStyles();
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">  return (
</span><span class="token prefix unchanged"> </span><span class="token line">    &lt;div className={classes.parent}>
</span><span class="token prefix unchanged"> </span><span class="token line">      &lt;div className={classes.child}>
</span><span class="token prefix unchanged"> </span><span class="token line">        Background turns red when the mouse hovers over the parent.
</span><span class="token prefix unchanged"> </span><span class="token line">      &lt;/div>
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">      &lt;div className={clsx(classes.child, classes.small)}>
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">      &lt;div className={cx(classes.child, classes.small)}>
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">        Background turns red when the mouse hovers over the parent.
</span><span class="token prefix unchanged"> </span><span class="token line">        I am smaller than the other child.
</span><span class="token prefix unchanged"> </span><span class="token line">      &lt;/div>
</span><span class="token prefix unchanged"> </span><span class="token line">    &lt;/div>
</span><span class="token prefix unchanged"> </span><span class="token line">  );
</span><span class="token prefix unchanged"> </span><span class="token line">}
</span></span>
<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">export default App;</span></span>

The following is a comprehensive example using the $ syntax, useStyles() parameters, merging in classes from a classes prop (see doc) and an explicit name for the stylesheet.

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">import clsx from 'clsx';
</span><span class="token prefix deleted">-</span><span class="token line">import { makeStyles, createStyles } from '@material-ui/core/styles';
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">import { makeStyles } from 'tss-react/mui';
</span></span>
<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">const useStyles = makeStyles((theme) => createStyles&lt;
</span><span class="token prefix deleted">-</span><span class="token line">  'root' | 'small' | 'child', {color: 'primary' | 'secondary', padding: number}
</span><span class="token prefix deleted">-</span><span class="token line">>
</span><span class="token prefix deleted">-</span><span class="token line">({
</span><span class="token prefix deleted">-</span><span class="token line">  root: ({color, padding}) => ({
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">const useStyles = makeStyles&lt;{color: 'primary' | 'secondary', padding: number}, 'child' | 'small'>({name: 'App'})((theme, { color, padding }, classes) => ({
</span><span class="token prefix inserted">+</span><span class="token line">  root: {
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">    padding: padding,
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">    '&amp;:hover $child': {
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">    [`&amp;:hover .${classes.child}`]: {
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">      backgroundColor: theme.palette[color].main,
</span><span class="token prefix unchanged"> </span><span class="token line">    }
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">  }),
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">  },
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">  small: {},
</span><span class="token prefix unchanged"> </span><span class="token line">  child: {
</span><span class="token prefix unchanged"> </span><span class="token line">    border: '1px solid black',
</span><span class="token prefix unchanged"> </span><span class="token line">    height: 50,
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">    '&amp;$small': {
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">    [`&amp;.${classes.small}`]: {
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">      height: 30
</span><span class="token prefix unchanged"> </span><span class="token line">    }
</span><span class="token prefix unchanged"> </span><span class="token line">  }
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">}), {name: 'App'});
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">}));
</span></span>
<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">function App({classes: classesProp}: {classes?: any}) {
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">  const classes = useStyles({color: 'primary', padding: 30, classes: classesProp});
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">  const { classes, cx } = useStyles({
</span><span class="token prefix inserted">+</span><span class="token line">    color: 'primary',
</span><span class="token prefix inserted">+</span><span class="token line">    padding: 30
</span><span class="token prefix inserted">+</span><span class="token line">  }, {
</span><span class="token prefix inserted">+</span><span class="token line">    props: {
</span><span class="token prefix inserted">+</span><span class="token line">      classes: classesProp
</span><span class="token prefix inserted">+</span><span class="token line">    }
</span><span class="token prefix inserted">+</span><span class="token line">  });
</span></span>
<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">  return (
</span><span class="token prefix unchanged"> </span><span class="token line">    &lt;div className={classes.root}>
</span><span class="token prefix unchanged"> </span><span class="token line">      &lt;div className={classes.child}>
</span><span class="token prefix unchanged"> </span><span class="token line">        The Background take the primary theme color when the mouse hovers the parent.
</span><span class="token prefix unchanged"> </span><span class="token line">      &lt;/div>
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">      &lt;div className={clsx(classes.child, classes.small)}>
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">      &lt;div className={cx(classes.child, classes.small)}>
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">        The Background take the primary theme color when the mouse hovers the parent.
</span><span class="token prefix unchanged"> </span><span class="token line">        I am smaller than the other child.
</span><span class="token prefix unchanged"> </span><span class="token line">      &lt;/div>
</span><span class="token prefix unchanged"> </span><span class="token line">    &lt;/div>
</span><span class="token prefix unchanged"> </span><span class="token line">  );
</span><span class="token prefix unchanged"> </span><span class="token line">}
</span></span>
<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">export default App;</span></span>

After running the codemod, search your code for "TODO jss-to-tss-react codemod" to find cases that the codemod could not handle reliably.

There may be other cases beyond those with TODO comments that are not handled fully by the codemod—particularly if parts of the styles are returned by functions.

If the styles buried within a function use the $ syntax or useStyles params, then those styles won't be migrated appropriately.

To ensure that your class names always includes the actual name of your components, you can provide the name as an implicitly named key (name: { App }).

See this tss-react doc for details.

You may end up with eslint warnings like this one if you deconstruct more than one item.

Don't hesitate to disable eslint(prefer-const), like this in a regular project, or like this in a CRA.

withStyles()

tss-react also features a type-safe implementation of v4's withStyles().

<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">import Button from '@material-ui/core/Button';
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">import Button from '@mui/material/Button';
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">import withStyles from '@material-ui/styles/withStyles';
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">import { withStyles } from 'tss-react/mui';
</span></span>
<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">const MyCustomButton = withStyles(
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">  Button,
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">  (theme) => ({
</span><span class="token prefix unchanged"> </span><span class="token line">    root: {
</span><span class="token prefix unchanged"> </span><span class="token line">      minHeight: '30px',
</span><span class="token prefix unchanged"> </span><span class="token line">    },
</span><span class="token prefix unchanged"> </span><span class="token line">    textPrimary: {
</span><span class="token prefix unchanged"> </span><span class="token line">      color: theme.palette.text.primary,
</span><span class="token prefix unchanged"> </span><span class="token line">    },
</span><span class="token prefix unchanged"> </span><span class="token line">    '@media (min-width: 960px)': {
</span><span class="token prefix unchanged"> </span><span class="token line">      textPrimary: {
</span><span class="token prefix unchanged"> </span><span class="token line">        fontWeight: 'bold',
</span><span class="token prefix unchanged"> </span><span class="token line">      },
</span><span class="token prefix unchanged"> </span><span class="token line">    },
</span><span class="token prefix unchanged"> </span><span class="token line">  }),
</span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line">)(Button);
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">);
</span></span>
<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">export default MyCustomButton;</span></span>

Theme style overrides

Global theme overrides are supported out of the box by TSS.

Follow the instructions in the relevant section of the Breaking changes doc, and provide a name to makeStyles.

In Material UI v5, style overrides also accept callbacks.

By default, TSS is only able to provide the theme. If you want to provide the props and the ownerState, please refer to this documentation.

Complete the migration

Once you migrate all of the styling, remove unnecessary @mui/styles by uninstalling the package.

With npm:

<span class="token function">npm</span> uninstall @mui/styles

With yarn:

<span class="token function">yarn</span> remove @mui/styles