React组件中‘Get Insured’按钮后方灰色栏问题排查

我正在设计一个React组件，整体设计已接近预期，但"Get Insured"按钮后方始终出现一块奇怪的灰色栏。以下是组件代码、预期效果及实际效果：

/* eslint-disable react/prop-types */

const InsuranceCard = ({ title, image, tags }) => (
  <div className="bg-gray-800 rounded-xl overflow-hidden shadow-lg">
    <div className="relative h-48">
      <img src={image} alt={title} className="w-full h-full object-cover" />
      <div className="absolute inset-0 bg-black bg-opacity-40"></div>
      <div className="absolute bottom-0 left-0 p-4 text-white">
        <h3 className="text-sm font-semibold mb-1">Family Travel Insurance</h3>
        <h2 className="text-xl font-bold mb-2">{title}</h2>
        <div className="flex space-x-2">
          {tags.map((tag, index) => (
            <span key={index} className="text-xs bg-gray-500 bg-opacity-50 px-2 py-1 rounded">
              {tag}
            </span>
          ))}
        </div>
      </div>
    </div>
    <div className="p-4">
      <button className=" bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
        Get Insured
      </button>
    </div>
  </div>
);

const TravelInsurance = () => {
  const insuranceOptions = [
    {
      title: "Peace of Mind for the Whole Family",
      subtitle: "Family Travel Insurance",
      image: "https://images.unsplash.com/photo-1475503572774-15a45e5d60b9?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
      tags: ["Family Medical", "Trip Cancellation", "Baggage"]
    },
    {
      title: "Ensure a worry-free trip to London",
      subtitle: "Family Travel Insurance",
      image: "https://images.unsplash.com/photo-1513635269975-59663e0ac1ad?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
      tags: ["Family Medical", "Trip Cancellation", "Baggage"]
    },
    {
      title: "Explore Korea with Confidence",
      subtitle: "Family Travel Insurance",
      image: "https://plus.unsplash.com/premium_photo-1716968595130-3df477c0087d?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
      tags: ["Family Medical", "Trip Cancellation", "Baggage"]
    }
  ];

  return (
    <div className="container mx-auto px-4 py-8">
      <h1 className="text-3xl font-bold text-gray-800 mb-2">Secure Your Trips</h1>
      <p className="text-gray-400 mb-6">Ensure peace of mind on your travels with our comprehensive travel insurance plans.</p>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {insuranceOptions.map((option, index) => (
          <InsuranceCard key={index} {...option} />
        ))}
      </div>
    </div>
  );
};

export default TravelInsurance;

预期效果 #

实际效果 #

问题原因及修复 #

问题出在按钮所在的容器——InsuranceCard中包裹按钮的<div className="p-4">没有设置独立背景色，它继承了外层卡片的bg-gray-800灰色背景，导致按钮后方出现灰色区域。

要修复这个问题，只需给该容器添加bg-white类，让按钮区域背景变为白色，和预期效果一致：

<div className="p-4 bg-white">
  <button className=" bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
    Get Insured
  </button>
</div>

内容的提问来源于stack exchange，提问作者Arkadipta Mojumder