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

[Anonymous]

Also erstelle ich eine Website mit NextJs und tailwindcss, bin aber auf ein Problem gestoßen.
Jedes Mal, wenn ich die Website neu startete, verschwanden die Farben auf diesen 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 über 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
Auch nachdem ich das Element im Browser überprüft habe, scheint es, dass der Stil und alles korrekt war, aber die Hintergrundfarben anzeigen als rgba(0,0,0,0)