[material-ui] Return styles directly if the selector is & when using applyStyles

[siriwatknp]

closes #43620

This is an edge case because ideally, there is no need to use theme.applyStyles for a single color scheme. It happens when using cssVariables with a single light or dark palette:

createTheme({
  cssVariables: true,
  palette: { mode: 'dark' }
});

With a single color scheme, the applyStyles('dark', styles) return { '&': styles }.
Emotion treats it as a different <style>, so the default styles of AppBar wins the one from the theme style overrides.

Before: https://codesandbox.io/p/sandbox/adoring-firefly-x6cktw?file=%2Fdemo.tsx%3A1%2C1-61%2C1

This PR fixes by returning the styles directly if the selector is & so that a new <style> is not created.

After: https://codesandbox.io/p/sandbox/material-ui-cra-ts-forked-fzf2m5

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Netlify deploy preview

https://deploy-preview-43633--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 0e77141

[DiegoAndai]

How/why does Emotion treat & differently? I'm asking so I can understand the solution better 😊

[siriwatknp]

How/why does Emotion treat & differently? I'm asking so I can understand the solution better 😊

Here is the proof using emotion styled directly:

styled.h1`
  font-size: 2rem;
  padding: 0;
  margin: 0 0 0.25rem 0;

  & {
    color: red;
  }
`;

The result:

I think this is done by the processor (stylus) inside Emotion, when it finds &, it creates a new array index of the styles. As a result the <style> is created more than one but the className is still the same.