我遇到了一个问题,该问题是我的div从某个地方设置了最大宽度,但是我不确定它在哪里,因为我已经检查了我正在使用的样式包(语义UI)以及我的拥有自己的内部样式,我无法找到它的来源(如图1所示,它在一个样式标签中,但这仅是如图2所示的编译后的语义UI代码)。(图片1)
(图像2)
由于显示的问题,这就是应用程序内部显示的内容
这是预期的行为:(占用整个空间而不是受到限制)
App.css
html,
body,
.app {
height: 100vh;
background: #eee;
padding: 1em;
}
/* SidePanel.js */
.menu {
padding-bottom: 2em;
}
/* Messages.js */
.messages {
height: 70vh;
overflow-y: scroll;
}
/* MessageForm.js */
.message__form {
position: fixed !important;
bottom: 1em;
margin-left: 320px !important;
left: 0;
right: 1em;
z-index: 200;
}
.emoijpicker {
position: absolute;
}
/* Message.js */
.message__self {
border-left: 2px solid orange;
padding-left: 8px;
}
.message__image {
padding: 1em;
}
Messages.js(由于相关性,未包括某些部分)
import { Segment, Comment } from "semantic-ui-react";
...
render() {
// prettier-ignore
const { messagesRef, messages, channel, user, numUniqueUsers, searchTerm, searchResults, searchLoading, privateChannel, isChannelStarred, typingUsers, messagesLoading } = this.state;
return (
<React.Fragment>
<MessagesHeader
channelName={this.displayChannelName(channel)}
numUniqueUsers={numUniqueUsers}
handleSearchChange={this.handleSearchChange}
searchLoading={searchLoading}
isPrivateChannel={privateChannel}
handleStar={this.handleStar}
isChannelStarred={isChannelStarred}
/>
<Segment>
<Comment.Group className="messages">
{this.displayMessageSkeleton(messagesLoading)}
{searchTerm
? this.displayMessages(searchResults)
: this.displayMessages(messages)}
{this.displayTypingUsers(typingUsers)}
<div ref={node => (this.messagesEnd = node)} />
</Comment.Group>
</Segment>
<MessageForm
messagesRef={messagesRef}
currentChannel={channel}
currentUser={user}
isPrivateChannel={privateChannel}
getMessagesRef={this.getMessagesRef}
/>
</React.Fragment>
);
}
}
export default connect(
null,
{ setUserPosts }
)(Messages);
正如教父在注释中建议的那样,我尝试对.ui类进行重写,并且在App.css文件中添加了此内容后,得到了预期的行为:
App.css
...
.ui {
max-width: 100% !important;
}
...