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');