diff --git a/packages/mui-styled-engine-sc/src/index.js b/packages/mui-styled-engine-sc/src/index.js index c3abf854c79360..b08dd27847bdcf 100644 --- a/packages/mui-styled-engine-sc/src/index.js +++ b/packages/mui-styled-engine-sc/src/index.js @@ -36,6 +36,10 @@ export default function styled(tag, options) { return stylesFactory; } +Object.keys(scStyled).forEach((tag) => { + styled[tag] = scStyled[tag]; +}); + // eslint-disable-next-line @typescript-eslint/naming-convention export const internal_processStyles = (tag, processor) => { // Styled-components attaches an instance to `componentStyle`. diff --git a/packages/mui-styled-engine-sc/src/styled.test.js b/packages/mui-styled-engine-sc/src/styled.test.js index 959fb6a518d91b..6c5a08277ec1f0 100644 --- a/packages/mui-styled-engine-sc/src/styled.test.js +++ b/packages/mui-styled-engine-sc/src/styled.test.js @@ -1,5 +1,6 @@ import * as React from 'react'; import { expect } from 'chai'; +import scStyled from 'styled-components'; import { createRenderer } from 'test/utils'; import styled from '@mui/styled-engine-sc'; @@ -39,6 +40,10 @@ describe('styled', () => { expect(typeof styled('span').attrs).to.equal('undefined'); }); + it('has primitive', () => { + expect(styled.div).to.equal(scStyled.div); + }); + // The babel-plugin-styled-components depends on the withConfig option to be defined it("should allow styled-components's APIs: .withConfig", () => { expect(typeof styled('span').withConfig).to.equal('function'); diff --git a/packages/mui-styled-engine/src/index.d.ts b/packages/mui-styled-engine/src/index.d.ts index 1130164844f7b0..2e24d2b6d4700f 100644 --- 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 as EmotionStyledTags } from '@emotion/styled'; import { PropsOf } from '@emotion/react'; export * from '@emotion/styled'; @@ -136,11 +136,21 @@ export interface CreateStyledComponent< ): StyledComponent; } +export type StyledTags = { + [Tag in keyof JSX.IntrinsicElements]: CreateStyledComponent< + { + theme?: Theme; + as?: React.ElementType; + }, + JSX.IntrinsicElements[Tag] + >; +}; + export interface CreateMUIStyled< MUIStyledCommonProps extends {}, MuiStyledOptions, Theme extends object, -> { +> extends StyledTags { < C extends React.ComponentClass>, ForwardedProps extends keyof React.ComponentProps = keyof React.ComponentProps, diff --git a/packages/mui-styled-engine/src/index.js b/packages/mui-styled-engine/src/index.js index 2eb9a86b75674d..bb5c474726535a 100644 --- 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 index d7e51ee936932a..2fdbbcdbc3a2f8 100644 --- 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); + }); });