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（即图像或 p 或 div 标签）会影响元素的布局

React js Antd 渲染错误的布局

React js Antd renders erroneous layout

javascript

reactjs

antd