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.

Duplicated MuiButtonBase (and others) in <style> elements

See original GitHub issue

The <head> section contains several times the same material-ui internal <style> creating conflicts in styles being applied. The content of those <style> are not using unique names as before it seems: .jss346…

This is not a v0.x issue.
I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

For example, .MuiButtonBase-root should be present once only.

Current Behavior 😯

.MuiButtonBase-root is added 2/3 times.

material-ui-issue

material-ui-style-content

Steps to Reproduce 🕹

Cannot reproduce with a simple piece of code; even in our application sometimes it’s ok sometimes not. Tell us how to troubleshoot on our side to provide more information.

Context 🔦

Nothing special I believe. Components are badly rendered because of material-ui internal styles are being applied out of order.

Your Environment 🌎

This issue appeared since v4 beta.0 (still in beta.1): v4 alpha were ok.

Tech	Version
Material-UI	v4 beta.0 and 1
React	16.8.6
Browser
TypeScript	3.4.5
etc.

Issue Analytics

State:
Created 4 years ago
Reactions:8
Comments:41 (15 by maintainers)

Top GitHub Comments

15reactions

eps1loncommented, May 14, 2019

@marc-polizzi Be sure that your path imports are not too deep.

import { Button } from '@material-ui/core'; // Ok
import Button from '@material-ui/core/Button'; // Ok
import Button from '@material-ui/core/Button/Button'; // Not Ok

If you’re building with wepack you could use something like webpack-bundle-analyzer or put the created stats.json into webpack-analyse to see which modules are importing creating the duplicate module.

12reactions

sovanjanacommented, Dec 23, 2019

run npm ls @material-ui/styles command to check if there is any duplicate material-ui in your code.
if any of your package’s using material-ui then make sure material-ui package is in devDependency and peerDependency. example: "peerDependencies": { "@material-ui/core": ">=4.7" }, "devDependencies": { "@material-ui/core": "4.7.2" },

Top Results From Across the Web

Duplicated MuiButtonBase (and others) in <style> elements

Components are badly rendered because of material-ui internal styles are being applied out of order. Your Environment. This issue appeared ...

Duplicate Button Baseline from Material UI in header

This is causing our custom styles to be overwritten and styles to be dumped ... the html into your post and indicate the...

Is There A Solution For Duplicate Style In Head, In React Js ...

Duplicated MuiButtonBase and others in <style > elements Components are badly rendered because of materialui internal styles are being applied out of.

Frequently Asked Questions - Material UI - MUI

Why do the fixed positioned elements move when a modal is opened? ... If you think that the issue may be in the...

Bookmark landing page Using React & Material-UI coding ...

Duplicate id attribute value panel1a-header found on the web page. Context: <div class="MuiButtonBase-root MuiAccordionSummary-root jss42" tabindex="0" ...