Question

我一直在玩next / material-ui，这个问题似乎让我感到困惑。我创建了一个小例子来重现该问题。我正在尝试使用Material-UI的Box组件将元素居中。第一次打开页面localhost：3000时，它看起来居中很好，正如我期望的那样。但是，当我刷新时，p元素似乎会移至左上角并停留在该位置，直到我再次重新启动服务器为止。

最重要的是，开发和生产模式的工作方式也不同：

dev模式（npm run dev）：始终如上述操作

prod模式（npm运行构建； npm运行开始）：只要定义了getInitialProps（）函数，它的行为就如上所述。如果我将其注释掉，它将很好用。

我也没有看到任何错误消息。我在这里想念什么？

更新：我切换到使用MUI的网格容器/项目以满足我的布局需求（而不是Box），现在它可以按预期工作。那是Box组件的错误吗？还是我对它的用法有误解？

我的pages / index.js如下：

import React from 'react'
import Box from '@material-ui/core/Box'

class Index extends React.Component {

  static async getInitialProps() {
    return { data: "some-data" }
  }

  render() {
    return (
      <div>
        <Box display="flex" flexDirection="column" width="100%" justifyContent="center" alignItems="center" mt={10}>
          <p> This is my test </p>
        </Box>
      </div>
    )
  }
}

export default Index

重新加载时样式不一致（？）（nextjs项目）

0 个答案: