我需要在使用顺风css的React项目业务部分，所以如果这部分是流行的背景必须改变颜色，所以我需要做的背景颜色是动态的，但在这行<div className{flex flex-col p-6 mx-auto max-w-lg text-center bg-[#${if_Popular ? "f8ae51" : "fff"}] rounded-[30px] border border-gray-100 shadow }>不工作我怎么能解决这个问题，我问chatgpt，但所有的答案不工作，我不明白什么是错误的：
我的密码是：

import Image from "next/image";
import React from "react";
import { logo } from "../assets";

const Business = ({
  clients,
  type,
  description,
  price,
  color,
  if_Popular,
  included,
}) => {
  return (
    <>
      <section className="flex flex-1 font-poppins">
        <div className=" mx-auto max-w-screen-xl  lg:px-6">
          <div className="">
            <div
              className={`flex flex-col p-6 mx-auto max-w-lg text-center bg-[#${if_Popular ? "f8ae51" : "fff"}] rounded-[30px] border border-gray-100 shadow `}
            >
              <div className="flex flex-row ">
                <div>
                  <Image className="h-18 w-14" src={logo} />
                </div>
                <div className="flex flex-col ml-2 py-2">
                  <p className="font-semibold text-[#6F6C90] text-[12px]">
                    for {clients}
                  </p>
                  <h3 className="mb-4 text-2xl font-semibold">{type}</h3>
                </div>

                <div className="flex flex-1 pl-4 justify-end">
                  {if_Popular && (
                    <p className="font-poppinsfont-semibold rounded-lg p-3 h-[6vh] justify-center border-[#ffffff33] bg-[#ffffff33] text-[#fff]">
                      Popular
                    </p>
                  )}
                </div>
              </div>
              <div className="flex">
                <p className="">{description}</p>
              </div>
              <div className="flex justify-start items-baseline my-4">
                <span
                  className={`mr-2 text-[#${
                    if_Popular ? `fff` : `160e4d`
                  }]  text-5xl font-poppins font-semibold`}
                >
                  $ {price}
                </span>
                <span className={`text-[#${if_Popular ? `000` : `b3b3b3`}] `}>
                  /monthly
                </span>
              </div>
              <div
                className={`text-left font-poppins mb-6 text-[#${
                  if_Popular ? `fff` : `160e4d`
                }] `}
              >
                <p className="font-semibold text-xl ">What’s included</p>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
};

export default Business;