Lots of empty data-meta="MuiBox" style tags generated

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

Current Behavior 😯

I was trying to render about 78 items, then I realized its render time was taking too much. Just was looking what was the reason and realized that lots of empty MuiBox style tags are generated when using Box component. Which was causing performance issue.

Expected Behavior 🤔

Using Box component shouldn’t generate empty style tags.

Context 🔦

Rendering 78 items which are using Box component inside create more than 1200 empty style tags which causing render it around 600ms

Your Environment 🌎

`npx @material-ui/envinfo`

  Chrome
  System:
    OS: macOS 11.0
  Binaries:
    Node: 12.18.1 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.5 - /usr/local/bin/npm
  Browsers:
    Chrome: 83.0.4103.116
    Edge: Not Found
    Firefox: Not Found
    Safari: 14.0.1
  npmPackages:
    @emotion/styled:  10.0.27 
    @material-ui/core: ^4.11.1 => 4.11.2 
    @material-ui/icons: ^4.9.1 => 4.11.2 
    @material-ui/lab: ^4.0.0-alpha.57 => 4.0.0-alpha.57 
    @material-ui/styles:  4.11.2 
    @material-ui/system:  4.11.2 
    @material-ui/types:  5.1.0 
    @material-ui/utils:  4.11.2 
    @types/react: ^16.14.1 => 16.14.2 
    react: ^17.0.1 => 17.0.1 
    react-dom: ^17.0.1 => 17.0.1 
    typescript: ^4.0.5 => 4.1.3 

[eps1lon]

Duplicate of https://github.com/mui-org/material-ui/issues/21893.

This is fixed in v5. We will not backport this fix to v4.

[oliviertassinari]

@jamilalisgandarov You can replace the imports of the Box from the core package and create your own following our guide with emotion: https://material-ui.com/system/basics/#emotion.