[英]How to add Conditional CSS?
I am trying to make a Chatbox where if the sender's message is less than the full width of the chat-box it should have margin-left:auto
to make it go to the left side, otherwise it should have a margin-left:30px
to have consistency in the design.我正在尝试制作一个聊天框,如果发件人的消息小于聊天框的全宽,它应该有
margin-left:auto
使其 go 到左侧,否则它应该有一个margin-left:30px
在设计中保持一致性。
.transcription-texts {
height: 70vh;
padding: 20px;
padding-right: 0px;
overflow: auto;
direction: rtl;
.speaker-turn {
display: flex;
gap: 10px;
align-items: flex-start;
direction: ltr;
.speaker-font {
color: white;
margin-bottom: 20px;
padding: 10px 30px 10px 10px;
&.ch1 {
margin-left: auto; //here needs to be margin-left:30px when full width
background-color: #68a4ff;
border-radius: 20px;
border-top-right-radius: 0px;
}
&.ch2 {
background-color: #0041a4;
border-radius: 20px;
border-top-left-radius: 0px;
margin-right: 30px;
}
}
}
}
Edit this how I solved the problem:编辑这个我如何解决问题:
HTML: HTML:
if (each.ch === "ch1") {
return (
<div className={`speaker-turn customer`}>
<span className="speaker-font ch1">{each.t}</span>
<img src={CustomerIcon} />
</div>
);
} else if (each.ch === "ch2") {
return (
<div className={`speaker-turn`}>
<img src={AgentIconDark} />
<span className="speaker-font ch2">{each.t}</span>
</div>
);
}
CSS: CSS:
.transcription-texts {
height: 70vh;
padding: 20px;
padding-right: 0px;
overflow: auto;
direction: rtl;
.speaker-turn {
display: flex;
gap: 10px;
align-items: flex-start;
direction: ltr;
&.customer {
justify-content: end;
}
.speaker-font {
color: white;
margin-bottom: 20px;
padding: 10px 30px 10px 10px;
&.ch1 {
margin-left: 30px;
background-color: #68a4ff;
border-radius: 20px;
border-top-right-radius: 0px;
}
&.ch2 {
background-color: #0041a4;
border-radius: 20px;
border-top-left-radius: 0px;
margin-right: 30px;
}
}
}
}
I think you could always give it a margin-left of 30px, or even a max-width of 100% - 30px and then just use flex to align it to the right我认为你总是可以给它一个 30px 的左边距,甚至 100% - 30px 的最大宽度,然后使用 flex 将它向右对齐
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.