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

Search keywords: component selector, emotion, plugin, v6