Material-UI styles overriding my styles cause of ordering

Question

Hello there fellow programmers.

I am currently experiencing an issue with my own styles created using makeStyles(...). What's happening is; when I import my styles constant which is exported from another module, the style block is placed before the other MUI styles which causes mine to be overriden. I have not yet been able to find any solution to this what so ever and that is why I am here today, trying to figure out how I could possibly go my ways to fix this. Here's an image that contains the order of the style blocks that is playing with my mind currently.

PLEASE NOTE: The style block that's mine is the one with the data meta of makeStyles. Another thing is, I've attempted to use StylesProvider.

IMPORTANT: This only happens when uploaded. It works just fine on localhost, but this is the outcome of being uploaded to vercel.

Here's two examples of usages:

import { Theme } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';

const DarkTheme = makeStyles((theme: Theme) => ({
  mdButton: {
    backgroundColor: "#404040"
  },
}));

export default DarkTheme;

import {Button} from '@material-ui/core';
import React from "react";
import DarkTheme from 'DarkTheme';

export default function Example() {
  const styles = DarkTheme();

  return (
    <Button className={styles.mdButton}>
      Example
    </Button>
  )
}

Any help is appreciated, thank you in advance.

@VietDinh I edited with an example for you, I apologize for not providing it earlier; I am new to stackoverflow and forgot to do so. — Oliwer, Sep 14 '20 at 17:49

score 1 · Accepted Answer · answered Sep 14 '20 at 18:22

1

As you may know, f you have two CSS classes applied to the same element with the same degree of specificity, then the winner will be the CSS class that is defined last within the document (based on the order of the elements in the , NOT the order of the class name strings in the class attribute of the element being styled). As: Material UI v4 makeStyles exported from a single file doesn't retain the styles on refresh

So, you can change order of imports. Import Button before import style. Let try with what is different from:

import React from "react";
import {Button} from '@material-ui/core';
import DarkTheme from 'DarkTheme';

and

import React from "react";
import DarkTheme from 'DarkTheme';
import {Button} from '@material-ui/core';

answered Sep 14 '20 at 18:22

Viet Dinh

1,871
1
6
18

I'm aware of this. This is what I've got currently and it is still bugging out. A quick side note: it works fine on localhost, but not when uploaded, for example on vercel. – Oliwer Sep 14 '20 at 18:27
I see, you may have import Comopent before Style at anywhere call. I suggest you should move style to Component file or use other styling in react - material ui at: https://material-ui.com/styles/basics/#migration-for-material-ui-core-users – Viet Dinh Sep 14 '20 at 18:31
1

When it's uploaded, I guess it's in production-mode. If you have issues on builded app you can check this FAQ item: https://material-ui.com/getting-started/faq/#why-arent-my-components-rendering-correctly-in-production-builds – Richard Haddad Sep 14 '20 at 18:31

score -1 · Answer 2 · answered Sep 14 '20 at 18:19

makeStyles returns a function which must be called as a React hook. So please name it in consequence.

const useDarkTheme = makeStyles((theme: Theme) => ({
  mdButton: {
    backgroundColor: "#404040"
  },
}));

export default useDarkTheme;

https://reactjs.org/docs/hooks-intro.html

If you don't want to use hooks you can check withStyles alternative: https://material-ui.com/styles/basics/#higher-order-component-api

You can also check how CSS injection works in material-ui https://material-ui.com/styles/advanced/#css-injection-order (tl;dr: order of makeStyles calls matter).

Material-UI styles overriding my styles cause of ordering

2 Answers2