Chakra ui v3 игнорирует стили ⇐ Javascript

[Anonymous]

Как вы видите, стили выделены
я использую реакцию с Vite, так как вы видите, что это не машинописный текст, либо кнопки как-то работают
я спросил у некоторых ИИ, но у меня ничего не получилось

включенные коды:

• PrimaryButton.jsx — компонент некоторых работающих стилей
• Welcome.jsx - на странице в основном цвета не работают, я не проверял размеры, возможно, они работают
• ChakraProvider.jsx - компонент, который поставляется с пользовательским интерфейсом chakra
• main.jsx - все настройки есть, я настроил chakraprovider, но это не исправляет проблема
• theme.js - конфигурация, в которой я сохраняю все переменные, как вы знаете, и они игнорируются chakra ui
• package.json - для проверки версий зависимостей

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

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

{children}

);
};

export default PrimaryButton;

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;

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

export function Provider(props) {
return (

{props.children}

)
}

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(




,
)

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);

{
"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"
}
}


Подробнее здесь: https://stackoverflow.com/questions/798 ... ing-styles