Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Empty <style> elements created for each <Box> component

See original GitHub issue

Hi,

I just noticed this strange behaviour in the rendered HTML and I believe it’s a library bug, but I don’t know what’s causing it. It happens in both development and build modes.

Current behaviour

For each <Box> component in the JSX, a new <style data-jss="" data-meta="MuiBox"></style> node (empty) is added in the <head>.

Expected behaviour

It just shouldn’t do this.

Steps to reproduce

Go to https://kdd7w.csb.app/ and see the rendered output. The code can be found here: https://codesandbox.io/s/material-ui-style-elements-bug-kdd7w

Thanks!

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:12 (12 by maintainers)

github_iconTop GitHub Comments

1reaction
oliviertassinaricommented, Nov 6, 2020

@nuragic Two thoughts here.

  1. You can reproduce the same fix in v4 and prepare the migration to v5 by using this approach https://material-ui.com/system/basics/#emotion. It’s x3 faster.
  2. You could completely solve the virtualization performance issue by relying on a CSS sector. In v5, you could do:
<Box sx={{ '& .item': { p: 2 } }}>
  {items.map((item) => <div className="item" />)}
</Box>
0reactions
nuragiccommented, Nov 6, 2020

Aahhh ok got it! 🙏 🆗 👌

Read more comments on GitHub >

github_iconTop Results From Across the Web

empty - CSS: Cascading Style Sheets - MDN Web Docs
The :empty CSS pseudo-class represents any element that has no children. Children can be either element nodes or text (including whitespace) ...
Read more >
Using the Box Component in Material-UI to Easily Style Your ...
The Box component in Material-UI is very useful for styling elements in a React app. You can do so without using any separate...
Read more >
empty - CSS-Tricks
The CSS :empty pseudo-class selects any element that does not contain children for a given selector.
Read more >
What is the MUI Box component for? - Stack Overflow
In MUI v5, all MUI components allow you to define CSS styles via ... I often think of it as semantically similar to...
Read more >
8 Box model - W3C
Each box has a content area (e.g., text, an image, etc.) and optional surrounding padding , border , and margin areas; the size...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

[Tooltip] onOpen / onClose unexpected behaviour

Next page

After google sign in css got broken in nextJs