Skip to content

Commit 73e3bb4

Browse files
Copilotzdrawku
Copilot
and
zdrawku
committed
fix(skills): emphasize required theme CSS imports, add Next.js setup and grid theme guidance
Co-authored-by: zdrawku <11193764+zdrawku@users.noreply.github.com>
1 parent e1d3bf5 commit 73e3bb4

2 files changed

Lines changed: 118 additions & 9 deletions

File tree

  • skills

‎skills/igniteui-react-customize-theme/SKILL.md‎

Lines changed: 41 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,15 @@ The quickest way to theme an app is to import a pre-built CSS file in your React
7979
import 'igniteui-webcomponents/themes/light/bootstrap.css';
8080
```
8181

82+
> **CRITICAL:** Theme CSS imports are **required** for components to render correctly. Without them, components will appear unstyled, with missing icons and broken layouts.
83+
84+
**For grids**, you **must also** import the grid theme CSS:
85+
86+
```tsx
87+
import 'igniteui-webcomponents/themes/light/bootstrap.css';
88+
import 'igniteui-webcomponents-grids/grids/themes/light/bootstrap.css';
89+
```
90+
8291
Available pre-built CSS files:
8392

8493
| Import path | Theme |
@@ -92,7 +101,38 @@ Available pre-built CSS files:
92101
| `igniteui-webcomponents/themes/light/indigo.css` | Indigo Light |
93102
| `igniteui-webcomponents/themes/dark/indigo.css` | Indigo Dark |
94103

95-
> **Note:** The theme CSS comes from the underlying `igniteui-webcomponents` package (a dependency of `igniteui-react`).
104+
Grid theme CSS files follow the same pattern under `igniteui-webcomponents-grids/grids/themes/`:
105+
106+
| Import path | Theme |
107+
|---|---|
108+
| `igniteui-webcomponents-grids/grids/themes/light/bootstrap.css` | Grid Bootstrap Light |
109+
| `igniteui-webcomponents-grids/grids/themes/dark/bootstrap.css` | Grid Bootstrap Dark |
110+
| `igniteui-webcomponents-grids/grids/themes/light/material.css` | Grid Material Light |
111+
| `igniteui-webcomponents-grids/grids/themes/dark/material.css` | Grid Material Dark |
112+
| `igniteui-webcomponents-grids/grids/themes/light/fluent.css` | Grid Fluent Light |
113+
| `igniteui-webcomponents-grids/grids/themes/dark/fluent.css` | Grid Fluent Dark |
114+
| `igniteui-webcomponents-grids/grids/themes/light/indigo.css` | Grid Indigo Light |
115+
| `igniteui-webcomponents-grids/grids/themes/dark/indigo.css` | Grid Indigo Dark |
116+
117+
> **Note:** The theme CSS comes from the underlying `igniteui-webcomponents` and `igniteui-webcomponents-grids` packages (dependencies of `igniteui-react` and `igniteui-react-grids`).
118+
119+
### Next.js
120+
121+
In Next.js, import the theme CSS in each client component file that uses Ignite UI components, or in a shared root layout:
122+
123+
```tsx
124+
// app/layout.tsx
125+
import 'igniteui-webcomponents/themes/light/bootstrap.css';
126+
import 'igniteui-webcomponents-grids/grids/themes/light/bootstrap.css';
127+
128+
export default function RootLayout({ children }: { children: React.ReactNode }) {
129+
return (
130+
<html lang="en">
131+
<body>{children}</body>
132+
</html>
133+
);
134+
}
135+
```
96136

97137
---
98138

‎skills/igniteui-react-use-components/SKILL.md‎

Lines changed: 77 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -64,9 +64,11 @@ npm install igniteui-react-maps
6464
npm install react react-dom
6565
```
6666

67-
### Import a Theme
67+
### Import a Theme (REQUIRED)
6868

69-
Components require a CSS theme to render correctly. Import one in your entry point (`main.tsx`, `index.tsx`, or `App.tsx`):
69+
> **CRITICAL:** Components will render without styles, with broken icons and missing visuals if the theme CSS is not imported. **Always import the theme CSS before using any Ignite UI component.**
70+
71+
Import one theme CSS file in your entry point (`main.tsx`, `index.tsx`, or `App.tsx`). The theme CSS must be imported **in every file that uses Ignite UI components** if your framework does not have a single global entry point (e.g., Next.js — see below).
7072

7173
```tsx
7274
// main.tsx or index.tsx
@@ -86,16 +88,56 @@ Available themes:
8688
| `igniteui-webcomponents/themes/light/indigo.css` | Indigo Light |
8789
| `igniteui-webcomponents/themes/dark/indigo.css` | Indigo Dark |
8890

89-
For grids, also import the grid theme:
91+
**For grids**, you **must also** import the grid theme CSS. Without it, the grid will be missing styles and icons will show as placeholders:
9092

9193
```tsx
9294
import 'igniteui-webcomponents/themes/light/bootstrap.css';
9395
import 'igniteui-webcomponents-grids/grids/themes/light/bootstrap.css';
9496
```
9597

96-
> **Note:** The theme CSS is imported from the underlying `igniteui-webcomponents` package (a dependency of `igniteui-react`), not from `igniteui-react` itself.
98+
> **Note:** The theme CSS is imported from the underlying `igniteui-webcomponents` and `igniteui-webcomponents-grids` packages (dependencies of `igniteui-react` and `igniteui-react-grids`), not from `igniteui-react` itself.
99+
100+
### Next.js Setup
101+
102+
In Next.js, there is no single `main.tsx` entry point. Import the theme CSS **in each client component file** that uses Ignite UI components, or in a shared layout component:
103+
104+
```tsx
105+
// app/components/DataTable.tsx
106+
'use client';
107+
108+
import 'igniteui-webcomponents/themes/light/bootstrap.css';
109+
import 'igniteui-webcomponents-grids/grids/themes/light/bootstrap.css';
110+
111+
import { IgrGrid, IgrColumn, IgrPaginator } from 'igniteui-react-grids';
112+
113+
export default function DataTable({ data }: { data: any[] }) {
114+
return (
115+
<IgrGrid dataSource={data} autoGenerate={false}>
116+
<IgrColumn field="name" header="Name" />
117+
<IgrColumn field="email" header="Email" />
118+
<IgrPaginator perPage={10} />
119+
</IgrGrid>
120+
);
121+
}
122+
```
123+
124+
Alternatively, import themes once in a root layout:
125+
126+
```tsx
127+
// app/layout.tsx
128+
import 'igniteui-webcomponents/themes/light/bootstrap.css';
129+
import 'igniteui-webcomponents-grids/grids/themes/light/bootstrap.css';
130+
131+
export default function RootLayout({ children }: { children: React.ReactNode }) {
132+
return (
133+
<html lang="en">
134+
<body>{children}</body>
135+
</html>
136+
);
137+
}
138+
```
97139

98-
### Minimal App Example
140+
### Minimal App Example (Vite / CRA)
99141

100142
```tsx
101143
// main.tsx
@@ -530,12 +572,39 @@ IDEs with TypeScript support will provide auto-complete for all `Igr*` component
530572

531573
### Issue: Components render without styles
532574

533-
**Cause:** Missing theme CSS import.
575+
**Cause:** Missing theme CSS import. Without the theme CSS, components will render with broken layouts, missing icons (showing placeholders), and no visual styling.
534576

535-
**Solution:** Add a theme import in your entry point:
577+
**Solution:** Add the theme CSS import **before** any component usage. In Vite/CRA apps, add it to your entry point. In Next.js, add it to each client component file or the root layout:
536578

537579
```tsx
580+
// Always required for core components
538581
import 'igniteui-webcomponents/themes/light/bootstrap.css';
582+
583+
// Also required when using grids (IgrGrid, IgrDataGrid, IgrTreeGrid, etc.)
584+
import 'igniteui-webcomponents-grids/grids/themes/light/bootstrap.css';
585+
```
586+
587+
**Next.js example:**
588+
589+
```tsx
590+
'use client';
591+
592+
import 'igniteui-webcomponents/themes/light/bootstrap.css';
593+
import 'igniteui-webcomponents-grids/grids/themes/light/bootstrap.css';
594+
595+
import { IgrNavbar, IgrButton } from 'igniteui-react';
596+
import { IgrGrid, IgrColumn, IgrPaginator } from 'igniteui-react-grids';
597+
```
598+
599+
### Issue: Grid renders but icons show as placeholders and styles are missing
600+
601+
**Cause:** The grid theme CSS (`igniteui-webcomponents-grids/grids/themes/...`) is not imported. The base theme CSS alone is not enough for grids.
602+
603+
**Solution:** Import **both** theme CSS files:
604+
605+
```tsx
606+
import 'igniteui-webcomponents/themes/light/bootstrap.css'; // Base theme
607+
import 'igniteui-webcomponents-grids/grids/themes/light/bootstrap.css'; // Grid theme
539608
```
540609

541610
### Issue: `IgrGrid` from `igniteui-react/grid-lite` is confused with `IgrDataGrid` from `igniteui-react-grids`
@@ -583,7 +652,7 @@ const dialogRef = useRef<HTMLElement>(null);
583652

584653
## Best Practices
585654

586-
1. **Import a theme CSS** in your app entry point — components will not render correctly without it
655+
1. **Always import theme CSS** — components will not render correctly without it. Import `igniteui-webcomponents/themes/...` for core components and additionally `igniteui-webcomponents-grids/grids/themes/...` for grids. In Next.js, import in each client component file or the root layout
587656
2. **Don't call `defineComponents()`** — the React wrappers handle registration automatically
588657
3. **Use named imports** — `import { IgrButton } from 'igniteui-react'` enables tree-shaking
589658
4. **Handle events as `CustomEvent`** — not `React.SyntheticEvent`

0 commit comments

Comments
 (0)