Question

当我构建项目时，一切看起来都很好，但是在刷新或转到其他页面后，material-ui崩溃了，一切看起来都很奇怪。

每个解决方案都与样式化组件相关。我尝试添加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个按钮，并且它们之间有一些间距。在构建时，它看起来应该是这样。刷新后，这三个按钮彼此粘在一起，并且间距不存在。

https://codesandbox.io/s/material-demo-yp7pv正确呈现

https://imgur.com/2xTINrw在浏览器中的外观

Material-ui刷新后崩溃

0 个答案: