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.

makeStyles <style> order broken in storybook with @material-ui/styles >3.0.0-alpha.4

See original GitHub issue

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

Though I don’t see this exact issue already reported, #14341 and #14338 seem similar.

Expected Behavior 🤔

MUI <style> elements are inserted first, and user <style>s come next. This is the behavior we’re seeing up through @material-ui/styles 3.0.0-alpha.4.

Current Behavior 😯

When I upgrade the package to alpha.5 or alpha.9, the user <style> element is inserted first, and the MUI <style>s are inserted second.

Steps to Reproduce 🕹

Override some MUI styles in a component. View it in storybook, and use dev tools to see the order the <style> elements are inserted.

Adjust the @material-ui/styles package version to observe the difference in order, and see your overriding styles get lost.

I’ll try to create a codesandbox repro some time soon. Is there an example I can start with that already has storybook with typescript and mui?

Context 🔦

The symptom that we’re seeing is that some of our styles are getting overridden by the MUI styles. It only seems to happen in storybook; the actual application is fine.

Your Environment 🌎

Tech	Version
Material-UI	3.9.1
React	16.8.0-alpha.1
Browser	Chrome 71
TypeScript	3.2.4
@material-ui/styles	3.0.0-alpha.9
@storybook/react	4.1.11

Screenshots

@material-ui/styles 3.0.0-alpha.4

@material-ui/styles 3.0.0-alpha.5

Issue Analytics

State:
Created 5 years ago
Reactions:4
Comments:17 (7 by maintainers)

Top GitHub Comments

2reactions

Storkycommented, Nov 23, 2020

The right import is: import { makeStyles } from '@material-ui/core';

This fixed my makeStyles issue as well (bless you), but I’m confused why the material-ui.com examples all use ‘@material-ui/core/styles’ and all look correct.

That was rusty answer from me. Probably doesn’t really matter and both cases are okay, but better is: import { makeStyles } from '@material-ui/core/styles'

There are BIG bugs generator in material imports, many components may be imported by “deeper” sources without any error, like ❌

import AppBar from '@material-ui/core/AppBar/AppBar';
import Toolbar from '@material-ui/core/Toolbar/Toolbar';

instead of ✅

import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';

But by “deeper” imports their <styles> is rendered below in <head> and overlaps other styles for these components.

SOLUTION If makeStyles is overlaped by standart styles, check component’s imports.

There was my real problem, not in makeStyles import itself. And origin of these bugged imports may be in WebStorm’s “auto imports”, that was my case

1reaction

kunalpatel2706commented, Feb 8, 2019

Huh.! Stupid me… I didn’t read @Mangatt 's comment and material-ui documentation clearly. Here’s what I did as per doc for those who didn’t realize the fix is already there.

import "./helpers/material-style-fix";
import "./index.css";
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import App from "./App";
import registerServiceWorker from "./registerServiceWorker";

const baseUrl = document.getElementsByTagName("base")[0].getAttribute("href");
const rootElement = document.getElementById("root");

ReactDOM.render(
    <BrowserRouter basename={baseUrl}>                
                    <App/>                
            </BrowserRouter>,
    rootElement);

And inside material-style-fix.js

import { install } from "@material-ui/styles";
install();

Top Results From Across the Web

makeStyles <style> order broken in storybook ...

This is the behavior we're seeing up through @material-ui/styles 3.0.0-alpha.4 . Current Behavior. When I upgrade the package to alpha.5 or ...

Material UI styles not working in component (warning

I've created a stand-alone React component that uses the Material UI (4.8.3) library and published this to a private NPM package in order...

Troubleshooting - Material UI - MUI

Styles broken after migrating to v5. There are two reasons why component styles may be broken after you've completed all steps in the...

@mui/styles | Yarn - Package Manager

The withStyles JSS utility is no longer exported from @material-ui/core . You can use @material-ui/styles instead. Make sure to add a ThemeProvider at...

react-docgen-typescript-loader - Bountysource

I use react-docgen-typescript-loader on storybook with react typescript project and see it does not support interface props with extends. Example: