Component selectors no longer working with styled from @mui/material after upgrading to v6

[koen-dev]

Steps to reproduce

Stackblitz:

• MUI v5
• MUI v6

I’m currently migrating from Material UI v5 to v6 and noticed that component selectors no longer work when using the styled utility from @mui/material.

Here’s a minimal reproduction of what used to work in v5:

import { styled } from '@mui/material';

const Child = styled('div')`
  color: red;
`;

const Parent = styled('div')`
  ${Child} {
    color: green;
  }
`;

export default function Example() {
  return (
    <Parent>
      <Child>Hello World</Child>
    </Parent>
  );
}

Current behavior

After upgrading to v6, Child remains red, the selector no longer applies.

Expected behavior

In v5, this correctly styled the Child green when inside Parent.

Context

If I switch the import to Emotion directly like this:

import styled from '@emotion/styled';

…the selector works again and Child becomes green as expected.

I’m using Emotion and have the SWC plugin installed. Is there something I’ve missed during the v6 migration? Do I need to add or change an importMap in the plugin config to support component selectors with MUI’s styled?

Appreciate any help or clarification, this used to work, and I’d like to stick with the MUI import for consistency and theme integration.

Your environment

npx @mui/envinfo

System:
OS: macOS 15.4.1
Binaries:
Node: 22.14.0 - /nix/store/2ribxb3gi87gj4331m6k0ydn0z90zfi7-nodejs-22.14.0/bin/node
npm: 10.9.2 - /nix/store/2ribxb3gi87gj4331m6k0ydn0z90zfi7-nodejs-22.14.0/bin/npm
pnpm: 9.12.1 - ~/Library/pnpm/pnpm
Browsers:
Chrome: 127.0.6533.120
Edge: 136.0.3240.50
Safari: 18.4
npmPackages:
@emotion/react: 11.14.0 => 11.14.0
@emotion/styled: 11.14.0 => 11.14.0
@mui/icons-material: 6.4.11 => 6.4.11
@mui/material: 6.4.11 => 6.4.11
@mui/system: 6.4.11 => 6.4.11
@mui/x-date-pickers: 7.29.2 => 7.29.2
@types/react: 18.3.20 => 18.3.20
react: 18.3.1 => 18.3.1
react-dom: 18.3.1 => 18.3.1
typescript: 5.8.3 => 5.8.3

Search keywords: component selector, emotion, plugin, v6

[siriwatknp]

Found the root cause, it's because of this line https://github.com/mui/material-ui/blob/master/packages/mui-system/src/createStyled/createStyled.js#L163

const transformStyle = (style) => {
      // On the server Emotion doesn't use React.forwardRef for creating components, so the created
      // component stays as a function. This condition makes sure that we do not interpolate functions
      // which are basically components used as a selectors.
      if (typeof style === 'function' && style.__emotion_real !== style) {
        return function styleFunctionProcessor(props) {
          return processStyle(props, style);
        };
      }
      if (isPlainObject(style)) { // <<<<<<<<<<<<<<<<<<<<<< the styled component matched this condition
        const serialized = preprocessStyles(style);
        if (!serialized.variants) {
          return serialized.style;
        }
        return function styleObjectProcessor(props) {
          return processStyle(props, serialized);
        };
      }
      return style;
    };

The component selector passed the isPlainObject because at runtime, React component is an object of { $$typeof: … }. The component selector should not be serialized, instead return it directly to let Emotion handle it.

The fix is simple, I will create a PR soon.