CODEWITHSUNDEEP
javascriptreactjsantd
r4id4
r4id4

Reputation: 6077

React js Antd renders erroneous layout

I'm using Antd for a ReactJs project, but I saw that there is an erroneous rendering in the components layout. Here is my code

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

Which results in this rendering

enter image description here

As you can see they are not aligned horizontally.
But if I comment this line inside my App.js

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

Then everything renders perfectly

enter image description here

Why is this happening? Am I doing something wrong?

Upvotes: 0

Views: 101

Answers (1)

Hriday Modi
Hriday Modi

Reputation: 2081

your ntd/dist/antd.css file may have some css(i.e. for image OR p or div tag) which affects the layout of your elements

Upvotes: 1

Related Questions