Material-ui: [styles] Material UI Components lose their styles when using @material-ui/styles and "component" prop

[miguelCT]

When using "component" prop in a styled component, using @material-ui/styles, the original styles of the component are lost

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

Current Behavior 😯

I wanted to:

• Create a styled component, based on any Material UI component using @material-ui/styles.
• Besides, I wanted to change the "component" prop.

The problem is that, when using both (styled and "component" prop), the original styles of the Material UI component are lost.

Expected Behavior 🤔

The expected result is that the new styled component keeps the original component styles and apply the "component" prop.

Steps to Reproduce 🕹

As you can see the styled Toolbar loses its styles when using "component" prop with @materail-ui/styles

Sandbox showing the error with @material-ui/styles: https://codesandbox.io/s/material-styles-component-prop-demo-1t10c?fontsize=14

Sandbox showing that the error is not present when using @emotion/styled: https://codesandbox.io/s/material-styles-component-prop-demo-8o7ii?fontsize=14

Context 🔦

At first, I thought that it had something to do with this issue (https://github.com/mui-org/material-ui/issues/15695), but now I'm not sure if it's related anymore.

Your Environment 🌎

| Tech | Version |
| ----------- | ------- |
| Material-UI | v4.3.3 |
| React | 16.9.0 |
| Browser | Chrome |
| TypeScript | 3.7.0 |
| Emotion | 10.0.15 |

[oliviertassinari]

My advice, use styled-components or withStyles. We would need to rename the prop as.

[yamuun]

Hi miguelCT

See this reference
I'm sure it'll work out.
https://material-ui.com/guides/typescript/#decorating-components

https://material-ui.com/guides/typescript/#usage-of-withstyles

[miguelCT]

Ok, thanks for the responses.

I think we will stick with "styled-components" or "emotion" because we didn't want to change the way we are already working with "emotion" (mainly using styled function, not using HOC or hooks for now)

We are now using "emotion" v9, so we have to migrate anyway to v10 or change the styled library. Maybe it's time to give "styled-components" a try.

[markwain]

hi @oliviertassinari !
is there any plan to fix this?

[oliviertassinari]

Unclear, we have stopped heavy investment on the styling solution a year ago. Trying to leverage tools the community uses instead.

[markwain]

Thanks!

[oliviertassinari]

An update, this issue is being resolved in v5 thanks to #22342 and the new @material-ui/styled-engine package. You can verify it on https://codesandbox.io/s/material-styles-component-prop-demo-forked-gjngz?file=/demo.tsx

import { experimentalStyled as styled } from "@material-ui/core/styles";

const StyledToolbar = styled(Toolbar)({
  "&&": {
    color: "red"
  }
}) as typeof Toolbar;

      <AppBar position="static">
        <StyledToolbar component="span">Styled Toolbar (!)</StyledToolbar>
      </AppBar>

The styled HOC handles the as prop, which is different to the component prop handled by Material-UI.