Styling another component with styled()

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

Is there a way to style another component with styled() without using classes but targeting the styled component? Being able to do something like this:

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

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

render (
    <Parent>
        <Child>Green because I am inside a Parent</Child>
    </Parent>
    <Child>Red because I am not inside a Parent</Child>
)

If it’s already possible, could it be added to the documentation? Because I wasn’t able to find such information.

[Andarist]

I don’t think this would even be possible. In the MUI’s code the import has to resolve to a value usable at runtime. All macros are “pseudo” imports - they are not working on the runtime level, they were not designed for this. It’s a signal for the babel-plugin-macros to handle this, using what is contained in the imported file, and ellide the import from the file (well, there is keepImports option, but to use we change the importee path, so it changes from @emotion/styled/macro to just @emotion/styled).

Just take a look at the content of the macro file: https://unpkg.com/@emotion/styled@11.6.0/macro.js

This file imports our Babel plugin and thus it imports a lot of Babel stuff - you don’t want for that to end up in your bundles when not using Babel macros. And it doesn’t even export anything styled-related so without babel-plugin-macros such an import in your dependency (in this case - MUI) would fail hard.

[mnajdova]

You need to add @emotion/babel-plugin but it doesn’t work. See #29078

@bordeo you say on the issue that you linked that it is related to using next.js and confirmed that it worked previously on https://github.com/mui-org/material-ui/issues/26366#issuecomment-942435579

Please don’t leave misleading comments.

It is duplicate of https://github.com/mui-org/material-ui/issues/26366 @MariaSolOs please check if the comments provided there will solve your issue, if not provide a reproduction that we can take a look at.