我正在用TailwindCSS和DaisyUI在Nextjs中构建一个项目。在我的网站中集成Razorpay时，它的窗口显示为这样，没有DaisyUI，
但是当我包含DaisyUI时，我得到了这样的输出
，我不知道实际问题是什么，下面是所需的代码：
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx}",
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
// Or if using `src` directory:
"./src/**/*.{js,ts,jsx,tsx}",
],
daisyui: {
themes: ["business"],
},
theme: {
extend: {},
},
plugins: [require("tailwind-scrollbar"), require("daisyui")],
};index.js
export default function Home(){
async function handleSubscribe() {
const subscribe = await fetch("/api/createorder", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ amount: 500 }),
});
const res = await subscribe.json();
console.log(res.order.id);
const options = {
key: process.env.NEXT_PUBLIC_RAZORPAY_ID,
amount: res.order.amount,
currency: "INR",
name: "Nirmal Ambasana",
description: "Test Transaction",
order_id: res.order.id,
callback_url: "http://localhost:3000/api/verifypayment",
notes: {
address: "Razorpay Corporate Office",
},
theme: {
color: "#0b0b0b",
},
overlay: false,
};
const rpay = new window.Razorpay(options);
rpay.open();
}
return (
<>
<Head>
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
</Head>
...
<button
className="btn-main text-[11pt]"
onClick={() => handleSubscribe()}
>
Upgrade
</button>
...
</>
)
}package.json
{
"name": "frontend_2",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@headlessui/react": "^1.7.12",
"@heroicons/react": "^2.0.16",
"@next/font": "13.1.6",
"axios-auth-refresh": "^3.3.6",
"cookie": "^0.5.0",
"crypto": "^1.0.1",
"cryptojs": "^2.5.3",
"daisyui": "^2.51.3",
"emailjs": "^4.0.1",
"jsonwebtoken": "^9.0.0",
"next": "13.1.6",
"nodemailer": "^6.9.1",
"razorpay": "^2.8.6",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-hook-resize-panel": "^1.3.2",
"react-resizable": "^3.0.4",
"react-toastify": "^9.1.1",
"set-cookie-parser": "^2.5.1",
"split-pane-react": "^0.1.3",
"styled-components": "^5.3.8"
},
"devDependencies": {
"autoprefixer": "^10.4.13",
"postcss": "^8.4.21",
"tailwind-scrollbar": "^2.1.0",
"tailwindcss": "^3.2.7"
}
}我想在Razorpay窗口打开时看到背景，我应该怎么做才能解决这个问题？谢谢：D
1条答案
按热度按时间1tu0hz3e1#
为了让我明白你想在这里完成什么，你想有一个背景模糊，而不是一个白色的背景权利？