0

When I run "npm run dev" my node.js components are styled in the order:

  1. custom scss styling
  2. custom muiTheme.tsx
  3. then the component styles.

However, when I run "run build" + "npm run start" my node.js components are styled in the order:

  1. custom muiTheme.tsx
  2. then the component styles.
  3. custom scss styling

The order in which they are imported messes up the css as the custom styles are expected to be imported first. now it shows the styling in development of node.js correctly, but not in production, because my custom styling is overwritten by the default Mui styling.

I import my custom styling file and custom muitheme into the _app.tsx.

my custom styling file: styles/styles.scss
my custom mui theme: styles/muiTheme.tsx

I've tried switching the order of the files in _app.tsx, but it makes no difference. I also looked at my local version and tried to run it in production, but this didn't work either. My research didn't come up with a good answer that worked either.

related github issues:

bas verdoorn
  • 1
  • 1
  • 3

1 Answers1

0

I found a solution, but it's not the best. If anyone has a better way I'd like to know.

you can use double classes, double ids, id instead of classes or !important to give your own styling more importance.

  • double class name will trump single class name:

    .custom-selector.custom-selector > .custom-selector

  • ID trumps class:

    #custom-id > .custom-class

  • IDs can be duplicated, too:

    #id#id > #id

stack overflow answer where i found this solution.

bas verdoorn
  • 1
  • 1
  • 3