[styled-engine][styled-engine-sc] Add support for tagged template styles with tags

[htunnicliff]

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

This PR implements the changes that @mnajdova shared in this comment. It should fix #28574.

This should provide the ability to use HTML tags as accessors on styled for both styled engines when writing tagged template string styles:

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

export const Example = styled.aside`
  color: red;
`;

Background

Both Styled Components and Emotion Styled docs use HTML tag accessors with tagged template strings as the default usage pattern.

Styled Components Homepage

https://styled-components.com

Emotion Styled Components Docs

https://emotion.sh/docs/styled#styling-elements-and-components

[mnajdova]

Thanks for looking into this. Honestly, I am not sure if this will bring any value. The main reason for using Material UI's styled() util would be because of the additional feature it supports, which can't be provided with this syntax.

[mnajdova]

We will need to update the type of the styled utility too, to extend ThemedStyledComponentFactories<Theme>

[htunnicliff]

I'm not entirely sure which type needs to be updated, but if you let me know, I can make that change!

[mnajdova]

Similar to how the types for the @mui/styled-engine are updated. The changes would need to be made in packages/mui-styled-engine-sc/src/index.d.ts

[htunnicliff]

Honestly, I am not sure if this will bring any value. The main reason for using Material UI's styled() util would be because of the additional feature it supports, which can't be provided with this syntax.

Thank you for clarifying. I didn't realize this would remove features that MUI's styled() provides. Which features would be going away with this syntax?

[htunnicliff]

Hi @mnajdova! Is there anything else you needed from me for this PR?

[mnajdova]

Thank you for clarifying. I didn't realize this would remove features that MUI's styled() provides. Which features would be going away with this syntax?

The things like specifying mui name which will support style overrides via theme, the support for sx prop on the components etc.

Hi @mnajdova! Is there anything else you needed from me for this PR?

Thanks for the mention, I will provide final feedback on Monday. I will have to think again about how we want to document this in the docs if we add it as feature. We should make it clear that it is just a duplication of emotion’s API

[mnajdova]

@siriwatknp @oliviertassinari what do you think, should we proceed with adding this feature? Should we add documentation around it?

[htunnicliff]

@mnajdova @siriwatknp @oliviertassinari – Checking in here. Would this PR still be a valuable feature to add?