在下面给出的代码中，当我尝试在寄存器中使用 colorPalatte 时，该值在主题（usestate）中绑定，但在类中我无法像这样使用它：className={
bg-[${theme.?primaryColor}]ColorPalatte.tsx
export interface colorPalatteType {
primaryColor: string;
secondaryColor: string;
tertiaryColor: string;
quartinaryColor: string;
}
export default function ColorPalatte(): colorPalatteType {
return {
primaryColor: "bg-[#222831]",
secondaryColor: "393E46",
tertiaryColor: "00ADB5",
quartinaryColor: "EEEEEE",
};
}
注册.tsx
import { motion } from "framer-motion";
import { Link, useNavigate } from "react-router-dom";
import CssDoodleUnicode from "../../../components/backgroundAnimation/CssDoodleUnicode";
import { useEffect, useState } from "react";
import {
AuthResponse,
AuthenticationService,
} from "../service/AuthenticationService";
import axios from "axios";
import { USER_REGISTER_URL } from "../../../systemutils/SystemConstants";
import SignWithGoogleButton from "../../../components/SignWithGoogleButton";
import { VerificationPopUs } from "../../../components/common/PopUs/VerificationPopUs";
import ColorPalatte, {
colorPalatteType,
} from "../../../systemutils/ColorPalatte";
interface request {
emailAddress: string;
password: string;
}
function register() {
const [theme, setTheme] = useState<colorPalatteType>();
const [email, setEmail] = useState<string>("");
const [password, setPassword] = useState<string>("");
const [message, setMessage] = useState<string>("");
const [disabled, setDisabled] = useState<boolean>(false);
const [authResponse, setAuthResponse] = useState<AuthResponse>({
isStatus: false,
message: "",
});
const signUpButtonTrigger = async () => {
setDisabled(true);
const validationResponse = AuthenticationService(email, password);
setAuthResponse(validationResponse);
setMessage(validationResponse.message);
};
const doodleTimeOut = () => {
document.querySelectorAll("css-doodle").forEach(function (o: any) {
o.update();
});
};
const navigate = useNavigate();
useEffect(() => {
if (authResponse.isStatus) {
try {
const body: request = {
emailAddress: email,
password: password,
};
const register = async () => {
await axios
.post(USER_REGISTER_URL, body)
.then((response) => {
if (response.data.status) {
setDisabled(true);
VerificationPopUs("Verification Message Send to your Email");
setTimeout(() => {
navigate("/");
}, 2500);
}
})
.catch((error) => {
if (error.response.data.errorCode === "1003") {
setMessage("Email Already Exist");
}
});
};
register();
} catch (error) {
setMessage("Server not Reachable");
}
}
}, [authResponse]);
useEffect(() => {
document.body.style.overflow = "hidden";
const genDoodleID = setInterval(doodleTimeOut, 150);
return () => {
document.body.style.overflow = "unset";
clearInterval(genDoodleID);
};
}, []);
useEffect(() => {
const getTheme = ColorPalatte();
setTheme(getTheme);
}, []);
console.log(theme?.primaryColor)
return (
<>
{/* <div className="absolute w-[100%] select-none overflow-hidden">
<CssDoodleUnicode></CssDoodleUnicode>
</div> */}
<motion.div
className="absolute top-1/2 left-1/2 bottom-1/2 right-1/2 flex items-center justify-center text-lg "
initial={{ opacity: 0, scale: 0 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.5 }}
>
<div className="flex items-center justify-center px-5 sm:px-0">
<div className={`flex ${theme?.primaryColor} rounded-lg shadow-lg border border-green-400 overflow-hidden w-[50dvh]`}>
<div className="w-full p-8">
<p className="text-gray-100 font-semibold text-center text-2xl">
Create New Account
</p>
<p className="text-red-600">{message}</p>
<div className="mt-4">
<label className="block text-gray-200 text-sm font-bold mb-2">
Email Address
</label>
<input
onChange={(e) => {
setEmail(e.target.value);
}}
className="text-gray-800 border border-gray-300 rounded py-2 px-4 block w-full focus:outline-2 focus:outline-blue-700"
type="email"
required
/>
</div>
<div className="mt-4 flex flex-col justify-between">
<div className="flex justify-between">
<label className="block text-gray-200 text-sm font-bold mb-2">
Password
</label>
</div>
<input
onChange={(e) => {
setPassword(e.target.value);
}}
className="text-gray-700 border border-gray-300 rounded py-2 px-4 block w-full focus:outline-2 focus:outline-green-700"
type="password"
/>
</div>
<div className="mt-8">
<button
disabled={disabled}
onClick={() => signUpButtonTrigger()}
className="bg-green-600 transition-colors duration-200 text-white font-bold py-2 px-4 w-full rounded-lg hover:bg-green-700"
>
Sign up
</button>
</div>
<SignWithGoogleButton />
<div className="mt-4 flex items-center w-full text-center">
<span className="text-xs text-gray-500 capitalize text-center w-full">
Don't have any account yet?
<Link to={"/authentication/"} className="text-green-700">
{" "}
Sign In
</Link>
</span>
</div>
</div>
</div>
</div>
</motion.div>
</>
);
}
export default register;
我希望使用从颜色调色板返回的十六进制代码并将其与 tailwind bg-[${value}] 绑定
根据文档：
Tailwind 如何提取类名的最重要含义是，它只会查找源文件中以完整不间断的字符串形式存在的类。
如果您使用字符串插值或将部分类名连接在一起，Tailwind 将找不到它们，因此不会生成相应的 CSS：
不要动态构造类名
<div class="text-{{ error ? 'red' : 'green' }}-600"></div>在上面的示例中，字符串
和text-red-600不存在，因此 Tailwind 不会生成这些类。 相反，请确保您使用的任何类名完整存在：text-green-600始终使用完整的类名
<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>
你可以：
styleexport default function ColorPalatte(): colorPalatteType {
return {
primaryColor: "#222831",
<div … style={{ backgroundColor: theme?.primaryColor }}>