[mui-styled-engine] Add tagged template keys to styled

mui · Mar 2, 2023 · f01deb3 · f01deb3
1 parent b1b9ef7
commit f01deb3
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/packages/mui-styled-engine/src/index.d.ts b/packages/mui-styled-engine/src/index.d.ts
@@ -1,5 +1,5 @@
 import * as CSS from 'csstype';
-import { StyledComponent, StyledOptions } from '@emotion/styled';
+import { StyledComponent, StyledOptions, StyledTags } from '@emotion/styled';
 import { PropsOf } from '@emotion/react';
 
 export * from '@emotion/styled';
@@ -106,7 +106,7 @@ export interface CreateStyledComponent<
   SpecificComponentProps extends {} = {},
   JSXProps extends {} = {},
   T extends object = {},
-> {
+> extends StyledTags {
   (
     ...styles: Array<Interpolation<ComponentProps & SpecificComponentProps & { theme: T }>>
   ): StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;

diff --git a/packages/mui-styled-engine/src/index.js b/packages/mui-styled-engine/src/index.js
@@ -26,6 +26,10 @@ export default function styled(tag, options) {
   return stylesFactory;
 }
 
+Object.keys(emStyled).forEach((tag) => {
+  styled[tag] = emStyled[tag];
+});
+
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export const internal_processStyles = (tag, processor) => {
   // Emotion attaches all the styles as `__emotion_styles`.

diff --git a/packages/mui-styled-engine/src/styled.test.js b/packages/mui-styled-engine/src/styled.test.js
@@ -1,4 +1,5 @@
 import { expect } from 'chai';
+import emStyled from '@emotion/styled';
 import styled from './index';
 
 describe('styled', () => {
@@ -11,4 +12,8 @@ describe('styled', () => {
       styled('span')(undefined, { color: 'red' });
     }).toErrorDev('MUI: the styled("span")(...args) API requires all its args to be defined');
   });
+
+  it('has primitive', () => {
+    expect(styled.div).to.equal(emStyled.div);
+  });
 });