CSS styles duplication when using computed class names

[yanickrochon]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When creating CSS classes dependents on passed props values, the styles are duplicated when the component refreshes.

Expected Behavior 🤔

The styles should properly be updated, removing any duplicates and unused by previous calls to makeStyles.

Steps to Reproduce 🕹

See provided sandbox

Declaring styles like this will create duplicates every time the component using the styles refresh :

const useStyles = makeStyles((theme) => ({
  testElement: ({ index, bgColor }) => ({
    [`& div:nth-child(${index})`]: {
      backgroundColor: bgColor
    },
    [`& div:not(:nth-child(${index}))`]: {
      backgroundColor: theme.palette.common.white
    }
  })
}));

Context 🔦

I noticed this behavior when debugging some styles I use in a project to render striped tables. The class renders custom striped tables given certain parameters.

Actual rules being applied

/**
 * Make table rows alternate in color. By default, every even row will have an alternate color.
 * 
 * Usage : 
 * 
 *   const useStyles = makeStyles(theme => ({
 * 
 *     table: {
 *       ...themedTableRows(theme(theme)
 *     }
 * 
 *   }));
 * 
 * 
 * Ex:  themedTableRows(theme, 1, 0)     // defaults
 *         - row
 *         - alternate row
 *         - row
 *         - alternate row
 * 
 * Ex:  themedTableRows(theme, 2)
 *         - row
 *         - row
 *         - alternate row
 *         - alternate row
 *         - row
 *         - row
 *         - alternate row
 *         - alternate row
 * 
 * Ex:  themedTableRows(theme, 3, 1)
 *         - row  (skipped)
 *         - row  (skipped)
 *         - row  (skipped)
 *         - row
 *         - row
 *         - row
 *         - alternate row
 *         - alternate row
 *         - alternate row
 *         - row
 *         - row
 *         - row
 *         - alternate row
 *         - alternate row
 *         - alternate row
 * 
 * @param {Object} theme          Material UI palette
 * @param {Number} groupSize      the number of rows to alternate
 * @param {Number} offset         skip the number of first groups
 * @return {Object}               classes to extend a rule with
 */
export const themedTableRows = (theme, groupSize = 1, offset = 0) => ({
   [groupSize < 2 ? '&:nth-of-type(even)' : Array.from({ length: groupSize }, (_, k) => `&:nth-child(${groupSize * 2}n+${k + groupSize + 1 + (offset * groupSize)})`).join(',')]: {
      backgroundColor: theme.palette.type === 'dark' ? darken(theme.palette.action.hover, 0.5) : lighten(theme.palette.action.hover, 0.4),
   },
   '&.Mui-selected': {
      backgroundColor: theme.palette.type === 'dark' ? darken(theme.palette.secondary.dark, 0.7) : lighten(theme.palette.secondary.light, 0.6),
   },
   [groupSize < 2 ? '&.Mui-selected:nth-of-type(even)' : Array.from({ length: groupSize }, (_, k) => `&.Mui-selected:nth-child(${groupSize * 2}n+${k + groupSize + 1 + (offset * groupSize)})`).join(',')]: {
      backgroundColor: theme.palette.type === 'dark' ? darken(theme.palette.secondary.dark, 0.65) : lighten(theme.palette.secondary.light, 0.4),
   }
});

I was adding :hover styles when I noticed the multiplication of overrides in the developer console.

Your Environment 🌎

`npx @material-ui/envinfo`

 System:
    OS: Linux 5.4 Ubuntu 20.04.1 LTS (Focal Fossa)
  Binaries:
    Node: 14.5.0 - ~/.nvm/versions/node/v14.5.0/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v14.5.0/bin/yarn
    npm: 6.14.5 - ~/.nvm/versions/node/v14.5.0/bin/npm
  Browsers:
    Chrome: 88.0.4324.96
    Firefox: 85.0
  npmPackages:
    @material-ui/core: ^4.11.3 => 4.11.3 
    @material-ui/lab: ^4.0.0-alpha.57 => 4.0.0-alpha.57 
    @material-ui/pickers: ^4.0.0-alpha.12 => 4.0.0-alpha.12 
    @material-ui/styles:  4.11.3 
    @material-ui/system:  4.11.3 
    @material-ui/types:  5.1.0 
    @material-ui/utils:  4.11.2 
    @types/react:  16.9.50 
    react: ^16.13.1 => 16.13.1 
    react-dom: ^16.13.1 => 16.13.1 

[oliviertassinari]

@yanickrochon It might be a bug yes, in any case, it doesn't really matter, we are deprecating makeStyles and withStyles in v5. You can upgrade to @material-ui/styled-engine.

[yanickrochon]

@oliviertassinari Oh, I missed that mention. This should be in the documentation so projects can start to upgrade early.

[oliviertassinari]

@yanickrochon Agree, we are getting closer to a point where we can document it. I think that it's something we can do once @mnajdova comes back from maternity leave. In theory, we would have migrated all the core components, and started migrating the demos too.

[yanickrochon]

Is there a post to describe the upgrading process? What would break for an existing project?

[oliviertassinari]

@yanickrochon Not yet, we start moving iteratively. We are moving toward the styled() and sx API. https://next.material-ui.com/components/slider/#unstyled-slider gives more context (looking at the demos)

[oliviertassinari]

An update, we have now made enough progress with the new @material-ui/styled-engine package in v5 to move toward a progressive removal of the @material-ui/styles package (based on JSS). The current plan:

• In v5.0.beta.0, this package will come standalone, in complete isolation from the rest.
• In v5.0.0, this package will be soft deprecated, not promoted in the docs, nor very actively supported.
• During v5, work on making the migration easier to the new style API (sx prop + styled() API). We might for instance, invest in the documentation for using react-jss that has more or less the same API. We could also invest in an adapter to restore the previous API but with emotion, not JSS.
• In v6.0.0, this package will be discontinued (withStyles/makeStyles API).

This was made possible by the awesome work of @mnajdova.