Chakra ui v3 ignoriert Stile [geschlossen] ⇐ JavaScript

[Anonymous]

Also meine Stile funktionierten nicht. Ich habe mir die Stile im Debug-Menü angesehen und dann wurde mir angezeigt, dass meine Stile wie folgt angeordnet sind:
Hintergrund: ̶̶b̶̶̶̶g̶̶.̶̶p̶̶̶̶r̶̶̶̶i̶̶̶̶m̶̶̶̶a̶̶̶̶r̶̶̶̶y̶̶̶; und als ich den Mauszeiger darüber bewegte, hieß es:
Ungültiger Eigenschaftswert
Ich verwende „Reagieren mit Vite“, wie Sie sehen, es ist kein Typoskript. Beide Schaltflächen funktionieren irgendwie.
Ich habe ein paar AIs gefragt, aber ich habe es nicht hinbekommen.

Enthaltene Codes:

• PrimaryButton.jsx – Komponente einiger davon Stile funktionieren
• Welcome.jsx – Seite, meistens Farben funktionieren nicht, ich habe die Größen nicht überprüft, vielleicht funktionieren sie
• ChakraProvider.jsx – Komponente, die mit Chakra UI kommt
• main.jsx – das ganze Setup ist da drin, ich habe Chakraprovider aber eingerichtet Es behebt das Problem nicht
• theme.js – Konfiguration, in der ich alle Variablen speichere, wie Sie wissen, und sie werden von Chakra UI ignoriert
• package.json – um die Abhängigkeitsversionen zu überprüfen

Code: Select all

import { Button as ChakraButton } from "@chakra-ui/react";

const PrimaryButton = ({ children, variant = "primary", ...props }) => {
return (

{children}

);
};

export default PrimaryButton;

Code: Select all

import PrimaryButton from "@/components/PrimaryButton";
import { Box, Container, Flex, Image, Text } from "@chakra-ui/react";
import React from "react";
import { useNavigate } from "react-router-dom";

const Welcome = () => {
const navigate = useNavigate();
return (






Welcome


 navigate("/register")}>Start



);
};

export default Welcome;

Code: Select all

import { ChakraProvider } from '@chakra-ui/react'
import { ThemeProvider } from 'next-themes'
import { system } from '@/theme'

export function Provider(props) {
return (

{props.children}

)
}

Code: Select all

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { Provider } from '@/components/ui/provider'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(




,
)

Code: Select all

import { createSystem, defaultConfig, defineConfig } from "@chakra-ui/react";

const config = defineConfig({
theme: {
tokens: {
sizes: {
container: {
xs: {value: "320px"},
sm: { value: "640px" },
md: { value: "768px" },
lg: { value: "1024px" },
xl: { value: "1440px"  },
},
},
colors: {
brand: {
main: { value: "#3188E1" },
50: { value: "#EFF6FF" },
100: { value: "#DBEAFE" },
600: { value: "#2563EB" },
},
text: {
dark: { value: "#1F1F1F" },
light: { value: "#F1F1F1" },
timer: { value: "#8C8C8C" },
},
product: {
bread: { value: "#FFF9E6" },
milk: { value: "#F0F9FF" },
yogurt: { value: "#F5F0FF" },
cream: { value: "#FFF5F0" },
breadDark: { value: "#2C261F" },
milkDark: { value: "#1A2835" },
yogurtDark: { value: "#2A2233" },
creamDark: { value: "#352724" },
},
semantic: {
success: { value: "#10B981" },
error: { value: "#EF4444" },
warning: { value: "#F59E0B" },
},
surface: {
dark: { value: "#121212" },
},
accent: {
orange: { value: "#FF4D00" },
orange50: { value: "#FFF5F0" },
orange100: { value: "#FFE8D6" },
orange600: { value: "#E63E00" },
yellow: { value: "#FFEC73" },
yellow50: { value: "#FFFBE6" },
yellow100: { value: "#FFF7CC" },
yellow600: { value: "#FFD700" },
lightBlue: { value: "#62D3FF" },
blue: {value: "#377EDA" },
yellowLight: { value: "#FFF490" },
yellowBorder: { value: "#FBC02D" },
orangeDark: { value: "#E65100" },
blueLightAlt: { value: "#90CAF9" },
blueBorder: { value: "#1976D2" },
blueDarkAlt: { value: "#0D47A1" }
},
},

fonts: {
heading: {
value:
"'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
},
body: {
value:
"'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
},
mono: {
value:
"'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace",
},
},

fontSizes: {
sm: { value: "0.875rem" },
md: { value: "1rem" },
lg: { value: "1.125rem" },
xl: { value: "1.25rem" },
"2xl": { value: "1.5rem" },
"3xl": { value: "1.875rem" },
"4xl": { value: "2.25rem" },
},

fontWeights: {
normal: { value: "400" },
medium: { value: "500" },
semibold: { value: "600" },
bold: { value: "700" },
extrabold: { value: "800" },
black: { value: "900" },
},

radius: {
md: { value: "0.5rem" },
lg: { value: "0.75rem" },
xl: { value: "1rem" },
"2xl": { value: "1.5rem" },
full: { value: "9999px" },
},
},

semanticTokens: {
colors: {
"bg.primary": {
default: { value: "#FFFAFA" },
_dark: { value: "#1A202C" },
},
"bg.secondary": {
default: { value: "#F7FAFC" },
_dark: { value: "#2D3748" },
},
"text.primary": {
default: { value: "{colors.text.dark}" },
_dark: { value: "{colors.text.light}" },
},
"text.timer": {
value: "{colors.text.timer}",
},
"button.primary.bg": {
default: { value: "{colors.brand.main}" },
_dark: { value: "{colors.brand.600}" },
},
"button.primary.text": {
value: "#F1F1F1",
},
"product.bread.bg": {
default: { value: "{colors.product.bread}"  },
_dark: { value: "{colors.product.breadDark}" },
},
"product.milk.bg": {
default: { value: "{colors.product.milk}" },
_dark: { value: "{colors.product.milkDark}" },
},
"product.yogurt.bg": {
default: { value: "{colors.product.yogurt}" },
_dark: { value: "{colors.product.yogurtDark}" },
},
"product.cream.bg": {
default: { value: "{colors.product.cream}" },
_dark: { value: "{colors.product.creamDark}" },
},
},

fontSizes: {
"hero.title": { value: "{fontSizes.4xl}" },
"section.title": { value: "{fontSizes.2xl}" },
"button.text": { value: "{fontSizes.md}" },
},

fontWeights: {
"hero.title": { value: "{fontWeights.extrabold}" },
"section.title": { value: "{fontWeights.bold}" },
"button.text": { value: "{fontWeights.medium}" },
},
},
},

globalCss: {
"html, body": {
fontFamily: "{fonts.body}",
backgroundColor: "bg.primary",
color: "text.primary",
},
h1: {
fontFamily: "{fonts.heading}",
fontWeight: "{fontWeights.extrabold}",
},
h2: {
fontFamily: "{fonts.heading}",
fontWeight: "{fontWeights.bold}",
},
button: {
fontFamily: "{fonts.body}",
fontWeight: "{fontWeights.medium}",
},
},
});

export const system = createSystem(defaultConfig, config);

Code: Select all

{
"name": "testing",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": {
"@chakra-ui/react": "^3.30.0",
"@emotion/react": "^11.14.0",
"next-themes": "^0.4.6",
"react": "^19.2.0",
"react-dom": "^19.2.0",
"react-icons": "^5.5.0",
"react-router-dom": "^7.12.0"
},
"devDependencies": {
"@eslint/js": "^9.39.1",
"@types/react": "^19.2.5",
"@types/react-dom": "^19.2.3",
"@vitejs/plugin-react": "^5.1.1",
"eslint": "^9.39.1",
"eslint-plugin-react-hooks": "^7.0.1",
"eslint-plugin-react-refresh": "^0.4.24",
"globals": "^16.5.0",
"vite": "^7.2.4",
"vite-tsconfig-paths": "^6.0.3"
}
}