Как правильно выровнять комментарий, используя semanti c UI в React JS?

Question

Чтобы сгенерировать компонент комментариев с помощью Semanti c UI, я написал следующий код:

import React from 'react'
import ReactDOM from 'react-dom'

const  App = () => {
    return (
        <div className = "ui container comment">
            <div className = "comment"> 
                <a href = "/" className = "avatar"> 
                    <img alt = "avatar" />
                </a>
                <div className = "content">
                    <a href = "/" className = "author"> Pratik </a>
                    <div className = "metadata">
                        <span className = "date"> Today at 6:00PM</span>
                    </div>
                    <div className = "text">This is a nice blog 
                    </div>
                </div>
            </div>
        </div>
    );
 };

 ReactDOM.render(<App />, document.querySelector('#root'))

Вывод, который я получаю, выглядит следующим образом:

Структура вывода, которая мне нужна, выглядит следующим образом .... параллельно:

В чем проблема? И как я могу решить это?

Answer 1

Нет, это не так. После долгого просмотра кода я обнаружил ошибку. Это было в строке кода:

<div className = "ui container comment">

Вместо "ui container comment", оно должно быть "ui container comments". Я пропустил это полностью, поскольку я новичок в React JS.

Answer 2

Вам нужно добавить CSS для этого. а затем импортируйте CSS сверху как

import './styles.css';

В противном случае вы также можете использовать жидкостную сетку из https://material-ui.com. Просто импортируйте import { Grid } from '@material-ui/core'

Вот ссылка https://material-ui.com/components/grid/#grid