Material-ui breaks down after refresh

Question

When i build the project everything looks fine but after i refresh or go to a different page material-ui breaks down and everything looks weird.

Every solution is related to styled-components. I tried adding babel-styled-components but that broke things even more leading to complete non-rendering of material-ui.

import React from 'react';

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

import Button from '@material-ui/core/Button';

const useStyles = makeStyles(theme => ({

  root:{

    justifyContent: 'center'

  },

  '@global': {

    body: {

      backgroundColor: theme.palette.common.black,

    },

  },

  button: {

    // margin: theme.spacing(20),

    margin: 20

  },

  input: {

    display: 'none',

  },

}));

 function Index() {

  const classes = useStyles();

  return (

    <div style={{justifyContent: 'center'}}>


      <Button href={"/"} variant="outlined" color="secondary" className={classes.button}>

        home

      </Button>

      <Button href={"/login"}variant="outlined" color="secondary" className={classes.button}>

        Login

      </Button>

      <Button variant="outlined" color="primary" className={classes.button}>

        Dashboard(protected)

      </Button>

    </div>

  );
}

export default Index;

This should render 3 buttons and some spacing between. At build, it looks how it should be. After refresh the 3 buttons are glued to each other and the spacing is not existent.

https://codesandbox.io/s/material-demo-yp7pv renders it correctly

https://imgur.com/2xTINrw how it looks in browser