如何在React JS中使用语义UI正确对齐注释？

Question

为了使用语义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'))

我得到的输出是这样的：

我需要的输出结构是这样的。...parallely：

是什么问题？我该如何解决呢？

Answer 1

您需要为其添加CSS。然后将该CSS作为[>]导入顶部

import './styles.css';
否则，您也可以使用https://material-ui.com中的流体网格。只需导入import { Grid } from '@material-ui/core'

这里是参考https://material-ui.com/components/grid/#grid

Answer 2

不是，不是。长时间查看代码后，我发现了错误。它在代码行上：