时间戳

首页 > 解决方案 > 如何在 React JS 中使用语义 UI 正确对齐注释？

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

问题描述

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

我得到的输出是这样的：

在此处输入图像描述

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

在此处输入图像描述

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

标签： javascriptreactjsreact-reduxsemantic-ui

解决方案

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

import './styles.css';

否则，您还可以使用来自https://material-ui.com. 只需导入import { Grid } from '@material-ui/core'

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

推荐阅读