如何在 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'))

我得到的输出是这样的：

我需要的输出结构是这样的....并行:

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

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

不，不是这样。看了半天代码，发现报错了。它在代码行上：

<div className = "ui container comment">

而不是 "ui container comment" ，应该是 "ui container comments"。我完全错过了，因为我是 React JS 的新手。

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

How to correctly align comment using semantic UI in React JS?

javascript

reactjs

semantic-ui

react-redux