Javascript React js Antd呈现错误布局

我将Antd用于ReactJs项目，但我发现组件布局中存在错误的渲染。 这是我的密码

import React from 'react';

export default class Test extends React.Component {

  render() {
    return (
      <div style={styles.test}>
        <p>This is a text</p>
        <img style={styles.image}
          src={require('../../assets/images/test.png')}
        />
      </div>
    )
  }
}

var styles = {
  test: {
    display: "flex",
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor:'#334455'
  },
}

然后一切都变得完美

---

为什么会这样？我做错什么了吗？

您的ntd/dist/antd.css文件可能有一些cssi.e。对于影响元素布局的image或p或div标记

您的ntd/dist/antd.css文件可能有一些影响元素布局的csselements@HridayModi公平地说，有一个利润率上限：p为0。我把它拆了，现在它工作得很好。谢谢，如果你写一个，我会接受你的回答

// import 'antd/dist/antd.css';