Beim Neustart der Website tritt ein Fehler bei der Hintergrundfarbwiedergabe auf ⇐ CSS

[Anonymous]

Ich erstelle eine Website mit NextJs und tailwindcss, bin aber auf ein Problem gestoßen.
Jedes Mal, wenn ich die Website neu startete, verschwanden die Farben dieser Schaltflächen mit Ausnahme der schwarzen
[page.tsx]

Code: Select all

{cars[currentModel]?.colors?.map((color, colorIndex) => {
const btnColorClass = cars[currentModel]?.btnColors?.[colorIndex] || 'bg-gray-500';
return (
 {
setCurrentColor(colorIndex)
if (colorApi?.scrollTo) {
colorApi.scrollTo(colorIndex)
}
}}
/>
);
})}

Hier ist meine TS-Datei, die ich verbunden habe

Code: Select all

export const cars: {model: string; colors: string[]; btnColors: string[];} [] =  [
{
model: "EX5",
colors: ["black", "gray", "silver", "teal", "white"],
btnColors: ["black", "gray-400", "gray-200", "teal-400", "gray-100"],
},
{
model: "Starray",
colors: ["black", "gray", "silver", "blue", "green", "white"],
btnColors: ["black", "gray-400", "gray-200", "blue-400", "green-800", "gray-100"],
},
];

export default cars;

Weiß jemand, wie man das beheben kann?
Ich habe festgestellt, dass das Kopieren der Farbe und das Einfügen in die btnColorClass in der page.tsx das Problem behebt, aber ich muss es einzeln tun und wenn ich es neu starte, wird alles wieder leer sein.
Außerdem scheint nach der Überprüfung des Elements im Browser der Stil und alles korrekt zu sein Die Hintergrundfarben werden als rgba(0,0,0,0) angezeigt.