React JS Antd呈现错误的布局

Question

我正在为一个ReactJs项目使用 Antd ，但是我发现组件布局中存在错误的渲染。 这是我的代码

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'
  },
}

这将导致此渲染

如您所见，它们没有水平对齐。
但是，如果我在App.js

中评论此行

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

然后一切都能完美呈现

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

Answer 1

您的ntd/dist/antd.css文件可能包含一些CSS（即用于图像OR p或div标签），这会影响元素的布局