Lỗi CSS thường gặp trong Svelte

Lỗi CSS thường gặp trong Svelte

Khi làm việc với Svelte, đặc biệt là trong các dự án phức tạp, bạn sẽ gặp phải nhiều vấn đề về CSS. Bài viết này tổng hợp các lỗi thường gặp và cách khắc phục dựa trên kinh nghiệm thực tế.

1. Menu bị nhỏ/teo do thiếu font-size

Tip

Menu navbar hiển thị kích thước chữ không đồng nhất giữa các trang. Một số trang chữ to, một số trang chữ nhỏ xíu.

Nguyên nhân

/* ❌ SAI - CSS global thiếu font-size */
.nav-link {
  text-decoration: none;
  color: var(--color-base-content);
  /* Thiếu font-size! */
}

Svelte scoped CSS có thể override global CSS nếu specificity không đủ mạnh. Khi component con định nghĩa style riêng, nó có thể kế thừa giá trị nhỏ từ browser default.

Cách fix

/* ✅ ĐÚNG - Định nghĩa đầy đủ trong CSS global */
.nav-link {
  text-decoration: none;
  color: var(--color-base-content);
  font-size: 1rem;        /* ← Quan trọng! */
  font-weight: 500;
  transition: background 0.2s ease, color 0.2s ease;
}

Tip

Luôn định nghĩa font-size cho các element text trong CSS global. Không để browser default hoặc dùng inherit cho navigation.

2. Chữ bị “nhảy”/flicker khi hover

Vấn đề

Khi hover vào menu item, chữ bị giật/nhảy gây khó chịu.

Nguyên nhân

/* ❌ SAI - Opacity change gây visual flicker */
.nav-link {
  opacity: 0.7;  /* Mặc định mờ */
}
.nav-link:hover {
  opacity: 1;    /* Hover sáng lên */
}

Thay đổi opacity khi hover làm thay đổi layout nhẹ, gây hiệu ứng giật lag.

Cách fix

/* ✅ ĐÚNG - Dùng color transition thay vì opacity */
.nav-link {
  opacity: 1;    /* Luôn giữ opacity = 1 */
  color: var(--color-base-content);
  transition: background 0.2s ease, color 0.2s ease;
}

.nav-link:hover {
  color: var(--color-primary);  /* Đổi màu thay vì opacity */
  background: rgba(0, 0, 0, 0.05);
}

3. CSS Scoped không hoạt động như mong đợi

Vấn đề

Style trong component Svelte ảnh hưởng đến các component khác.

Nguyên nhân

<style>
  /* ❌ SAI - Dùng :global() không cẩn thận */
  :global(p) {
    color: red;
  }
</style>

:global() làm cho CSS apply cho toàn bộ page, không chỉ component.

Cách fix

<style>
  /* ✅ ĐÚNG - Scope CSS trong component */
  p {
    color: red;
  }

  /* Chỉ dùng :global khi thực sự cần */
  :global(body) {
    background: #f0f0f0;
  }
</style>

4. Dark Mode không đồng bộ

Vấn đề

Component Svelte không thay đổi màu sắc khi switch dark mode.

Nguyên nhân

<style>
  /* ❌ SAI - Hard code màu */
  .card {
    background: white;
    color: black;
  }
</style>

Cách fix

<style>
  /* ✅ ĐÚNG - Dùng CSS variables */
  .card {
    background: var(--color-base-100);
    color: var(--color-base-content);
  }

  /* Hoặc dùng Starlight variables */
  .card {
    background: var(--sl-color-bg);
    color: var(--sl-color-text);
  }
</style>

5. Glassmorphism không hiển thị đúng

Vấn đề

Glass card có nền xám/sáng trong dark mode, làm chữ khó đọc.

Nguyên nhân

/* ❌ SAI - Hard code rgba values */
.glass-card {
  background: rgba(255, 255, 255, 0.7);
}

Cách fix

<style>
  /* ✅ ĐÚNG - Dùng theme variables */
  .glass-card {
    background: var(--sl-color-bg-inline-code);
    border: 1px solid var(--sl-color-border);
    color: var(--sl-color-text);
  }

  /* Đảm bảo child elements cũng dùng đúng màu */
  .glass-card :global(*) {
    color: var(--sl-color-text);
  }
</style>

6. Component trong MDX không hoạt động

Vấn đề

Svelte component import vào MDX nhưng không tương tác được.

Nguyên nhân

<!-- ❌ SAI - Thiếu client directive -->
import Counter from './Counter.svelte';

<Counter />

Cách fix

<!-- ✅ ĐÚNG - Thêm client:load -->
import Counter from './Counter.svelte';

<Counter client:load />

Tip

Astro mặc định server-render component. Để component có JavaScript tương tác (click, state…), phải thêm client:load hoặc các directive tương tự.

7. Syntax Error trong Svelte

Vấn đề

Lỗi 500 Internal Server Error khi build.

Nguyên nhân

<!-- ❌ SAI - Dư dấu " ở cuối -->
<div class:dark={variant === 'dark'}"">

Cách fix

<!-- ✅ ĐÚNG - Syntax chuẩn -->
<div class:dark={variant === 'dark'}>

Caution

Khi gặp lỗi 500 trong Svelte:

1. Check terminal để xem stack trace
2. Kiểm tra dấu ngoặc, quote, syntax directive
3. Dùng VS Code extension Svelte để highlight lỗi

Checklist trước khi deploy

• Định nghĩa font-size cho text elements trong global CSS
• Không dùng opacity change khi hover (dùng color thay thế)
• Dùng CSS variables thay vì hard code màu sắc
• Thêm client:load cho Svelte components trong MDX
• Test dark mode ở tất cả các trang
• Kiểm tra responsive trên mobile
• Không còn lỗi syntax trong terminal

Tài liệu tham khảo

• Svelte Scoped CSS
• Astro Client Directives
• CSS Variables Guide