CSS填充和宽度问题

Question

所以我试图给条件渲染 div 一个完整的宽度，但是我已经给它的父级填充了它没有占用容器的整个宽度

代码如下：

import Image from "next/image";
import DoubleTickIcon from "../PersonalChatAssets/DoubleTick.png";
import SingleTickIcon from "../PersonalChatAssets/SingleTick.png";
import { useRef, useEffect } from "react";
interface textbody {
  content: string;
  sent: boolean;
  time: string;
  replyReference: any;
}

const TextMessage = (props: textbody) => {
  console.log("Referece::::", props.replyReference);
  return (
    <div className="flex flex-col items-end w-[332px] ml-[52px] mr-[20px] mb-[18px]">
      <div className="flex justify-center items-center">
        <Image src={props.sent ? DoubleTickIcon : SingleTickIcon} alt="" />
        <h1 className="font-normal text-[12px] mb-0 font-[#787580]">
          {props.time}
        </h1>
      </div>

//this is its parent
      <div className="flex flex-col justify-center items-center bg-[#F7CA16] rounded-l-[16px] pr-[14px] pl-[14px] pt-[8px] pb-[8px] font-inter font-[14px] rounded-b-[16px] min-h-[40px] max-w-[340px] min-w-[60px] break-words">

//This is Conditional rendring part 
        {props.replyReference?.message !== undefined && (
          <div className="h-[52px] reply-gradient p-2 ">  
            <div className="-space-y-3 overflow-ellipsis truncate border-l-[4px] border-solid border-[#1F1D25] pl-2">
              <h1 className="">to {props.replyReference?.author}</h1>
              <p className="max-w-[230px] truncate ">
                {props.replyReference?.message}
              </p>
            </div>
          </div>
        )}

        <h1 className="flex justify-center item-center w-full h-full mb-0">{props.content}</h1>
      </div>
    </div>
  );
};

export default TextMessage;

这是我现在得到的输出：

这是我想要的输出：

Answer 1

您应该将pr-[14px] pl-[14px] pt-[8px] pb-[8px] 移动到reply-gradient 和h1 元素。

同样，你还需要在reply-gradient中加上rounded-l-[16px] rounded-b-[0]，才能与父组件的边框样式一致。

import Image from "next/image";
import DoubleTickIcon from "../PersonalChatAssets/DoubleTick.png";
import SingleTickIcon from "../PersonalChatAssets/SingleTick.png";
import { useRef, useEffect } from "react";
interface textbody {
  content: string;
  sent: boolean;
  time: string;
  replyReference: any;
}

const TextMessage = (props: textbody) => {
  console.log("Referece::::", props.replyReference);
  return (
    <div className="flex flex-col items-end w-[332px] ml-[52px] mr-[20px] mb-[18px]">
      <div className="flex justify-center items-center">
        <Image src={props.sent ? DoubleTickIcon : SingleTickIcon} alt="" />
        <h1 className="font-normal text-[12px] mb-0 font-[#787580]">
          {props.time}
        </h1>
      </div>

//this is its parent
      <div className="flex flex-col justify-center items-center bg-[#F7CA16] rounded-l-[16px] font-inter font-[14px] rounded-b-[16px] min-h-[40px] max-w-[340px] min-w-[60px] break-words">

//This is Conditional rendring part 
        {props.replyReference?.message !== undefined && (
          <div className="h-[52px] reply-gradient p-2 pr-[14px] pl-[14px] pt-[8px] pb-[8px] rounded-l-[16px] rounded-b-[0]">  
            <div className="-space-y-3 overflow-ellipsis truncate border-l-[4px] border-solid border-[#1F1D25] pl-2">
              <h1 className="">to {props.replyReference?.author}</h1>
              <p className="max-w-[230px] truncate ">
                {props.replyReference?.message}
              </p>
            </div>
          </div>
        )}

        <h1 className="flex justify-center item-center w-full h-full mb-0 pr-[14px] pl-[14px] pt-[8px] pb-[8px]">{props.content}</h1>
      </div>
    </div>
  );
};

export default TextMessage;

您可以查看this playground