html - 如何在 React 中对齐 2 个组件？

问题描述

我一直在为 React 中的聊天室应用程序构建 UI。一切都很顺利，直到突然，它刷新并且用户界面“坏了”。基本上，我有 2 个组件，一个侧边栏组件和一个聊天组件。我使用 flex 来定位它们。这是我的代码：

Sidebar.js

<div className="sidebar">
                <Card className="sidebar_card left">
                    <Icon icon="mountain" iconSize={40} />
                    <div>
                        <Button icon="search" minimal fill large />
                    </div>
                    <div>
                        <Button icon="plus" minimal fill large />
                    </div>
                </Card>
                <Card className="sidebar_card right">
                    <div>
                        <h2 className="bp3-heading">Smart Labs</h2>
                        <Popover content={popupMenu}>
                            <Button icon="chevron-down" minimal />
                        </Popover>
                    </div>
                    <CreateRoom />
                    <Menu>
                        {rooms.map(room => (
                            <SelectRoom text={room.name} id={room.id} />
                        ))}
                    </Menu>

                    <div></div>
                    <Button text="People" icon="new-person" minimal outlined />
                    <Menu>
                        <MenuItem text="Tony Quach" />
                    </Menu>
                </Card>
        </div>

聊天.js：

<div className="chat">
            <Card className="chat_card">
            <div className="chat_header">
                <h2 className="bp3-heading">{roomDetails?.name}</h2>
                <Divider />
            </div>
            <div className="chat_body">
                {roomMessages.map(({ message, timestamp, user, userImage }) => (
                    <Message
                        message={message}
                        timestamp={timestamp}
                        user={user}
                        userImage={userImage}
                    />
                ))}
           </div>
           <ChatInput roomName={roomDetails?.name} roomId={roomId} workspaceId={workspaceId} />
           </Card>
        </div>

侧边栏.css：

.sidebar {
    display: flex;
    flex: 0.2;
    height: 100vh;
}

.sidebar_card {
    border-radius: 0;
    margin: 0;
}

.sidebar_card > div {
    display: flex;
    justify-content: space-between;
}

.left > div {
    margin: 10px 0 0;
}

.right > div {
    margin: 0 0 20px;
}

聊天.css：

.chat {
    display: flex;
    flex: 0.7;
    height: 100vh;
}

.chat_card {
    width: 100%;
    border-radius: 0;
    margin: 0;
}

.chat_header {
    margin: 0 20px 0;
}

.chat_body {
    margin: 20px 20px 0;
}

在 App.js 中，我只是这样做：

<div class="app">
   <Sidebar />
   <Chat />
</div>

应用程序.css：

app {
    display: flex;
}

我使用 Blueprint.js

我使用border: 1px solid red 来尝试调试它，似乎Sidebar 组件虽然只有一个flex: 0.3，但不知何故占据了页面的整个宽度并将Chat 组件向下推（所以它们彼此堆叠而不是彼此对齐）。

有什么建议么？谢谢你。

标签： htmlcssreactjsjsxblueprintjs

html - 如何在 React 中对齐 2 个组件？

问题描述

解决方案

推荐阅读