Theming Troubleshooting

Issue: Theme overrides not taking effect

Cause: Override CSS is loaded before the theme CSS.

Solution: Make sure your custom CSS is imported after the theme:

// main.tsx
import 'igniteui-webcomponents/themes/light/bootstrap.css'; // Theme first
import './custom-overrides.css'; // Overrides second

Solution: Cast to React.CSSProperties:

<div style={{ '--ig-primary-h': '260deg' } as React.CSSProperties}>

Cause: Using React component name instead of web component tag name in CSS.

Solution: Use the underlying web component tag name in CSS selectors:

/* ✅ Correct — web component tag */
igc-button { --ig-size: 1; }

/* ❌ Wrong — React wrapper name */
IgrButton { --ig-size: 1; }