Материал-интерфейс ломается после обновления - PullRequest
Новая
       35

Материал-интерфейс ломается после обновления

0 голосов
/ 11 ноября 2019

Когда я создаю проект, все выглядит хорошо, но после того, как я обновляю или перехожу на другую страницу, материал - пользовательский интерфейс ломается и все выглядит странно.

Каждое решение связано со стилевыми компонентами. Я попытался добавить компоненты в стиле babel, но это сломало вещи еще больше, что привело к полному отказу от рендеринга 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;

Это должно отобразить 3 кнопки и некоторый интервал между ними. При сборке все выглядит так, как должно быть. После обновления 3 кнопки приклеиваются друг к другу, и интервал не существует.

https://codesandbox.io/s/material-demo-yp7pv отображает его правильно

https://imgur.com/2xTINrw как это выглядит в браузере

...